[] #INSERT_HEAD_CSS []
#INSERT_HEAD [
] [
] [
] [
] [
] [
] [
] [
] [
] [
] [
]

# Bootstrap Components

Default components & utilities.

## Alerts

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

Primary! This is a primary alert-check it out!
Secondary alert! This secondary alert is a new addition to the group.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

See full documentation

## Badges

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

##### Examples

# 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 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

## Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

## Slide 1 title

Slide 1 subtitle text

## Slide 2 title

Slide 2 subtitle text

## Slide 3 title

Slide 3 subtitle text

Previous Next

See full documentation

## Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

##### Examples

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

Email address We'll never share your email with anyone else.
Password
Example select
Example multiple select
Example textarea
File input 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
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
Option three is disabled
Check me out

##### Form states

Input with success Example help text that remains unchanged.
Input with error
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Input with error
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

## Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

##### Modal components

##### Modal title

Modal body text goes here.

##### Modal examples

##### Default Modal

Woohoo, you're reading this text in a modal!

##### Small Modal

Woohoo, you're reading this text in a modal!

##### Large Modal

Woohoo, you're reading this text in a modal!

##### Scrolling Modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Centered Modal

Woohoo, you're reading this text in a modal!

See full documentation

## Navs

Documentation and examples for how to use Bootstrap’s included navigation components.

##### Horizontal

##### Vertical

##### Tabs

##### Pills

See full documentation

## Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

##### Small pagination

##### Medium pagination

##### Large pagination

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";
?>`
Le raccourci SPIP <cadre> permet publier des extraits de code que l'on peut facilement copier-coller. <?php // ceci est du langage php echo "au revoir"; ?>

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 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