Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

See full documentation


Badges

Documentation and examples for badges, our small count and labeling component.

Examples

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Primary Secondary Success Warning Danger Info Light Dark

Primary Secondary Success Warning Danger Info Light Dark

See full documentation


Buttons

Use Bootstrap's button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

See full documentation


Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

See full documentation


Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

SPIP Forms

#FORMULAIRE_CHARTER

BootStrap Forms

Form controls
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Form states
Example help text that remains unchanged.
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

See full documentation


Jumbotron

Lightweight, flexible component for showcasing hero unit style content.

Hello, traveler!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Primary Secondary

See full documentation


Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Examples

See full documentation


Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Examples
25%
50%
75%
100%

See full documentation


Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

See full documentation


Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Examples

See full documentation


Typography

Ceci est le sur-titre de l’article

Charte typo par tetue

Ceci est le sous-titre de l’article

dimanche 1er juillet 2007, par Webmestre

Cette page présente un échantillon des enrichissements typographiques possibles sur ce site. Leur habillage est réalisé par le webmestre, en CSS, via des feuilles de style externes. Ce paragraphe constitue donc le chapeau.

Paragraphes

Premier paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Ici, retour à la ligne, généré par le raccourci SPIP « _  ». Espace insécable.

Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.


Troisième paragraphe, précédé d’une ligne horizontale de séparation, générée par le raccourci SPIP « ---- ». Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.

Un intertitre normal

Voici du texte en italique et du texte en gras.
Voici un texte supprimé et le texte inséré en correction .
Une définition de terme avec la balise <dfn>.
Un sigle, par exemple W3C, est lu lettre par lettre, tandis que SPIP est un acronyme puisqu’il forme un mot qui est lu normalement.

Texte de gauche à droite et Texte de droite à gauche avec <bdo>.
Mise en exposant 2 et mise en indice : H2O.
Et voici une note de bas de page [1].

 Ici, exemple de raccourci SPIP « -  ». Attention, leur succession ne constitue pas une liste ! Pour les listes, voir ci-dessous.

— Un tiret long, généré par le raccourci SPIP « -- », utile pour les dialogues.

Hyperliens

SPIP distingue les liens internes des liens externes dont URLs directes : https://www.spip.net, et lien généré par le raccourci [->site2] : site 2.
Mieux vaut spécifier la langue de destination, par exemple : Bonne pratique Opquast N°129.
Lien vers une définition du glossaire prédéfini : Wikipédia
Lien vers un document, avec le raccourci [->doc3] : Titre du document
Lien vers un auteur, avec le raccourci [->auteur1] : Webmestre
Courriel : adresse@courriel.net
Une ancre vers les citations : #citations

Listes

Liste non ordonnée (ul), générée avec le raccourci SPIP « -*  » :

  • Élément de liste non numérotée
  • Élément de liste non numérotée
  • Élément de liste non numérotée
    • Plantes
      • Ficus
      • Olivier
    • Animaux de compagnie
      • Chat
      • Chien

Et une liste numérotée (ol), générée avec le raccourci SPIP « -#  » :

  1. Voici ma main : elle a cinq doigts. En voici deux, en voici trois.
    Le premier, ce gros bonhomme, C’est le pouce qu’il se nomme.
  2. L’index qui montre le chemin, Est le second doigt de la main.
  3. Entre l’index et l’annulaire, Le majeur paraît un grand frère.
  4. L’annulaire porte l’anneau, Avec sa bague, il fait le beau.
  5. Le tout petit auriculaire Marche à côté de l’annulaire.

Regardez mes doigts travailler. Chacun fait son petit métier.

N’oublions pas les listes de définition, générées avec les balises HTML <dl>, <dd>, <dt> :

polatouche (n.m.)
Mammifère rongeur omnivore méconnu d’Eurasie ou d’Amérique du Nord, dit « écureuil volant » car il est capable de planer en ligne droite d’un arbre à l’autre grâce à son patagium (membrane qui réunit ses pattes à son corps). Pelage gris et blanc.
écureuil (n.m.)
Petit rongeur arboricole d’Europe à longue queue très touffue, excellent grimpeur, capable de sauts très étendus, amassant des provisions pour l’hiver et aisément familier de l’homme. Pelage gris ou roux.

Tableaux

Titre du tableau (caption)
entête entête entête
valeur valeur valeur
valeur valeur valeur
valeur valeur valeur

Citations

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ceci est une citation au fil du texte (avec la balise HTML <q>).

Ceci est une citation ordinaire, avec la balise HTML <blockquote>. La route est longue mais la voie est libre.

Second paragraphe. Deux humains s’échangent une pièce de 1€. Chacun repart avec une pièce de 1€. Deux humains s’échangent une idée. Chacun repart avec deux idées.

Ceci est une citation générée avec le raccourci SPIP <quote>. La route est longue mais la voie est libre.

Second paragraphe. Deux humains s’échangent une pièce de 1€. Chacun repart avec une pièce de 1€. Deux humains s’échangent une idée. Chacun repart avec deux idées.

Je le vis, je rougis, je pâlis à sa vue
Un trouble s’éleva dans mon âme éperdue
Mes yeux ne voyaient plus, je ne pouvais parler
Je sentis tout mon corps et transir et brûler.
 
Ceci est une citation du Phédre de Racine, générée avec le raccourci SPIP <poesie>, idéal pour les vers des poèmes et chansons.

Maecenas mollis. Et voici du code, généré avec le raccourci SPIP <code> :

<?php
    // ceci est du langage php
    echo "bonjour";
?>

Sans oublier un raccourci-clavier (<kbd>), un extrait de script (<samp>) et une variable (<var>).

Et pour finir en beauté, voici une formule mathématique, générée avec <math> :
a = \sqrt{b^{2} + c^{2}}

À éviter

Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML 1.0 Strict : exemple de basefont, exemple de font, exemple de u, exemple de s, exemple de strike, etc. Celles-ci sont déconseillées : exemple de b, exemple de i, exemple de big, exemple de small , exemple de tt.


Voir en ligne : Lien hypertexte


Ceci est le texte du Post-Scriptum. Cette page fait partie de la base de démarrage pour SPIP. Voici un autre exemple de cette charte typo.


Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Displays

Display 1

Display 2

Display 3

Display 4

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Lists
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Facilisis in pretium nisl aliquet
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

See full documentation