Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
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
Cards
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
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- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Examples
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
SPIP Forms
BootStrap Forms
Form controls
Form states
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.
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal components
Modal examples
Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Small pagination
Medium pagination
Large pagination
Popovers
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Examples
Progress
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Examples
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 |
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
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
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
- Plantes
Et une liste numérotée (ol
), générée avec le raccourci SPIP
« -#
» :
- 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. - L’index qui montre le chemin, Est le second doigt de la main.
- Entre l’index et l’annulaire, Le majeur paraît un grand frère.
- L’annulaire porte l’anneau, Avec sa bague, il fait le beau.
- 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
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 vueUn trouble s’éleva dans mon âme éperdueMes yeux ne voyaient plus, je ne pouvais parlerJe 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>
:
À éviter
Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML 1.0 Strict :
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