Rubriques

Toutes les rubriques HTML, <h1>à <h6>sont disponibles.

h1. Rubrique 1

h2. Rubrique 2

h3. Rubrique 3

h4. Rubrique 4

h5. Rubrique 5

h6. Rubrique 6

Corps du texte

La valeur globale par défaut de Bootstrap font-sizeest 14px , avec un line-heightde 20px . Ceci s'applique aux <body>et à tous les paragraphes. De plus, <p>(paragraphes) reçoivent une marge inférieure de la moitié de leur hauteur de ligne (10px par défaut).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Mécène sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida et eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Copie du corps principal

Faites ressortir un paragraphe en ajoutant .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Construit avec moins

L'échelle typographique est basée sur deux variables LESS dans variables.less : @baseFontSizeet @baseLineHeight. Le premier est la taille de police de base utilisée partout et le second est la hauteur de ligne de base. Nous utilisons ces variables et quelques calculs simples pour créer les marges, les rembourrages et les hauteurs de ligne de tous nos types et plus encore. Personnalisez-les et Bootstrap s'adapte.

Accent

Utilisez les balises d'emphase par défaut de HTML avec des styles légers.

`<small>`

Pour désaccentuer des lignes ou des blocs de texte, utilisez la petite balise.

Cette ligne de texte doit être traitée comme des petits caractères.

<p> <small> Cette ligne de texte doit être traitée comme des petits caractères. </petit> </p>

Audacieux

Pour mettre en valeur un extrait de texte avec un poids de police plus lourd.

L'extrait de texte suivant est affiché en gras .

<strong> rendu en texte gras </strong>

Italique

Pour mettre en évidence un extrait de texte en italique.

L'extrait de texte suivant est rendu sous forme de texte en italique .

<em> rendu sous forme de texte en italique </em>

La tête haute!N'hésitez pas à utiliser <b>et <i>en HTML5. <b>est destiné à mettre en évidence des mots ou des phrases sans donner d'importance supplémentaire, tandis qu'il <i>est principalement destiné à la voix, aux termes techniques, etc.

Cours d'alignement

Réalignez facilement le texte sur les composants grâce aux classes d'alignement de texte.

Texte aligné à gauche.

Texte aligné au centre.

Texte aligné à droite.

<p class = "text-left" > Texte aligné à gauche. </p> 
<p class = "text-center" > Texte aligné au centre. </p> 
<p class = "text-right" > Texte aligné à droite. </p>

Cours d'accentuation

Transmettez le sens à travers la couleur avec une poignée de classes utilitaires d'accentuation.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Énée eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Énée eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Abréviations

Implémentation stylisée de l'élément HTML <abbr>pour les abréviations et les acronymes pour afficher la version étendue au survol. Les abréviations avec un titleattribut ont une bordure inférieure en pointillé clair et un curseur d'aide au survol, fournissant un contexte supplémentaire au survol.

`<abbr>`

Pour un texte développé lors d'un long survol d'une abréviation, incluez l' titleattribut.

Une abréviation du mot attribut est attr .

<abbr title = "attribut" > attr </abbr>

`<abbr class="initialism">`

Ajouter .initialismà une abréviation pour une taille de police légèrement plus petite.

HTML est la meilleure chose depuis le pain en tranches.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Adresses

Présentez les coordonnées de l'ancêtre le plus proche ou de l'ensemble de l'œuvre.

`<address>`

Préservez la mise en forme en terminant toutes les lignes par <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Téléphone
: (123) 456-7890

Nom complet
[email protected]

<adresse>
  <strong> Twitter, Inc. </strong><br>
  795, avenue Folsom, bureau 600 <br>
  San Francisco, Californie 94107 <br>
  <abbr title = "Téléphone" > P : </abbr> (123) 456-7890 
</adresse>
 
<adresse>
  <strong> Nom complet </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</adresse>

Citations en bloc

Pour citer des blocs de contenu provenant d'une autre source dans votre document.

Citation par défaut

Enveloppez <blockquote>n'importe quel HTML comme citation. Pour les citations droites, nous recommandons un <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

Options de citation en bloc

Changements de style et de contenu pour des variations simples sur un bloc de citation standard.

Nommer une source

Ajouter <small>une balise pour identifier la source. Enveloppez le nom du travail source dans <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quelqu'un de célèbre dans le titre de la source

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> Quelqu'un de célèbre <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

Affichages alternatifs

À utiliser .pull-rightpour un bloc de citation flottant et aligné à droite.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quelqu'un de célèbre dans le titre de la source

<blockquote class = "pull-right" > 
  ...
</blockquote>

Listes

Non ordonné

Une liste d'éléments dans lesquels l'ordre n'a pas d' importance explicite.

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

Commandé

Une liste d'éléments dans lesquels l'ordre importe explicitement.

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Sans style

Supprimez le list-styleremplissage par défaut et gauche sur les éléments de liste (enfants immédiats uniquement).

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class = "sans style" > 
  <li> ... </li>
</ul>

En ligne

Placez tous les éléments de la liste sur une seule ligne avec inline-blockun rembourrage léger.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

La description

Une liste de termes avec leurs descriptions associées.

Listes de descriptions: Une liste de description est parfaite pour définir les termes.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida et eget metus.
Porte Malesuada: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Description horizontale

Alignez les termes et les descriptions <dl>côte à côte.

Listes de descriptions: Une liste de description est parfaite pour définir les termes.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida et eget metus.
Porte Malesuada: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

La tête haute!Les listes de description horizontales tronqueront les termes trop longs pour tenir dans la colonne de gauche text-overflow. Dans les fenêtres plus étroites, elles adopteront la disposition empilée par défaut.

En ligne

Enveloppez des extraits de code en ligne avec <code>.

Par exemple, <section>doit être enveloppé en ligne.

Par exemple , <code> & lt ; section & gt ;</ code > doit être enveloppé en ligne .

Bloc de base

À utiliser <pre>pour plusieurs lignes de code. Assurez-vous d'échapper tous les crochets angulaires dans le code pour un rendu correct.

<p>Exemple de texte ici...</p>

<pré>
  <p>Exemple de texte ici...</p>
</pre>

La tête haute!Assurez-vous de conserver le code dans <pre>les balises aussi près que possible de la gauche ; il rendra tous les onglets.

Vous pouvez éventuellement ajouter la .pre-scrollableclasse qui définira une hauteur maximale de 350 pixels et fournira une barre de défilement sur l'axe y.

Styles par défaut

Pour un style de base (remplissage léger et séparateurs horizontaux uniquement), ajoutez la classe de base .tableà n'importe quel fichier <table>.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter

<table class = "table" > 
  …
</table>

Cours optionnels

Ajoutez l'une des classes suivantes à la .tableclasse de base.

`.table-striped`

Ajoute des rayures zébrées à n'importe quelle ligne de tableau dans le <tbody>via le :nth-childsélecteur CSS (non disponible dans IE7-8).

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter

<table class = "table table-striped" > 
  …
</table>

`.table-bordered`

Ajoutez des bordures et des coins arrondis au tableau.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
1	Marquer	Otto	@getbootstrap
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

<table class = "table table-bordered" > 
  …
</table>

`.table-hover`

Activer un état de survol sur les lignes de table dans un fichier <tbody>.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

Rend les tables plus compactes en coupant de moitié le rembourrage des cellules.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

<table class = "table table-condensed" > 
  …
</table>

Classes de lignes facultatives

Utilisez des classes contextuelles pour colorer les lignes du tableau.

Classer	La description
`.success`	Indique une action réussie ou positive.
`.error`	Indique une action dangereuse ou potentiellement négative.
`.warning`	Indique un avertissement qui peut nécessiter votre attention.
`.info`	Utilisé comme alternative aux styles par défaut.

#	Produit	Paiement effectué	Statut
1	TB - Mensuel	01/04/2012	Approuvé
2	TB - Mensuel	02/04/2012	Diminué
3	TB - Mensuel	03/04/2012	En attente
4	TB - Mensuel	04/04/2012	Appelez pour confirmer

...
  < tr class = "succès" >
    <td> 1 < /td>
    <td>TB - Mensuel</ td >
    < td > 01/04/2012 < / td >
    <td>Approuvé</ td >
  </ tr >
...

Balisage de tableau pris en charge

Liste des éléments HTML de tableau pris en charge et comment ils doivent être utilisés.

Étiquette	La description
`<table>`	Élément d'habillage pour afficher les données dans un format tabulaire
`<thead>`	Élément conteneur pour les lignes d'en-tête de tableau ( `<tr>`) pour étiqueter les colonnes de tableau
`<tbody>`	Élément conteneur pour les lignes de tableau ( `<tr>`) dans le corps du tableau
`<tr>`	Élément conteneur pour un ensemble de cellules de tableau ( `<td>`ou `<th>`) qui apparaît sur une seule ligne
`<td>`	Cellule de tableau par défaut
`<th>`	Cellule de tableau spéciale pour les étiquettes de colonne (ou de ligne, selon la portée et l'emplacement)
`<caption>`	Description ou résumé de ce que contient le tableau, particulièrement utile pour les lecteurs d'écran

<tableau>
  <légende> ... </légende>
  <tête>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Styles par défaut

Les contrôles de formulaire individuels reçoivent un style, mais sans aucune classe de base requise sur le <form>ou des changements importants dans le balisage. Résultats dans des étiquettes empilées et alignées à gauche au-dessus des contrôles de formulaire.

<forme>
  <ensemble de champs>
    <légende> Légende </légende>
    <label> Nom du label </label>
    <input type = "text" placeholder = "Tapez quelque chose…" >  
    <span class = "help-block" > Exemple de texte d'aide au niveau du bloc ici. </span> 
    < classe d' étiquette = "case à cocher" > 
      <input type = "case à cocher" > Découvrez-moi 
    </label>
    <button type = "submit" class = "btn" > Soumettre </button>  
  </fieldset>
</form>

Dispositions facultatives

Bootstrap comprend trois dispositions de formulaire facultatives pour les cas d'utilisation courants.

Formulaire de recherche

Ajoutez .form-searchau formulaire et .search-queryau <input>pour une saisie de texte extra-arrondie.

<form class = "form-search" > 
  < type d'entrée = "texte" class = "requête de recherche de support d'entrée" >  
  <button type = "submit" class = "btn" > Rechercher </button>  
</form>

Formulaire en ligne

Ajoutez .form-inlinedes étiquettes alignées à gauche et des contrôles de bloc en ligne pour une mise en page compacte.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "E-mail" >   
  <input type = "password" class = "input-small" placeholder = "Mot de passe" >   
  < classe d' étiquette = "case à cocher" > 
    <input type = "checkbox" > Se souvenir de moi 
  </label>
  <button type = "submit" class = "btn" > Se connecter </button>  
</form>

Forme horizontale

Alignez à droite les étiquettes et faites-les flotter vers la gauche pour les faire apparaître sur la même ligne que les contrôles. Nécessite le plus de modifications de balisage à partir d'un formulaire par défaut :

Ajouter .form-horizontalau formulaire
Enveloppez les étiquettes et les contrôles dans.control-group
Ajouter .control-labelà l'étiquette
Enveloppez tous les contrôles associés .controlspour un alignement correct

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > E- mail </label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Mot de passe </label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" placeholder = "Mot de passe" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      < classe d' étiquette = "case à cocher" > 
        <input type = "checkbox" > Se souvenir de moi 
      </label>
      <button type = "submit" class = "btn" > Se connecter </button>  
    </div>
  </div>
</form>

Contrôles de formulaire pris en charge

Exemples de contrôles de formulaire standard pris en charge dans un exemple de mise en page de formulaire.

Contributions

Contrôle de formulaire le plus courant, champs de saisie textuels. Inclut la prise en charge de tous les types HTML5 : texte, mot de passe, date-heure, date-heure locale, date, mois, heure, semaine, nombre, e-mail, URL, recherche, tél et couleur.

Nécessite l'utilisation d'un spécifié typeà tout moment.

<input type = "text" placeholder = "Saisie de texte" >

Zone de texte

Contrôle de formulaire prenant en charge plusieurs lignes de texte. Modifiez rowsl'attribut si nécessaire.

<textarea lignes = "3" ></textarea>

Cases à cocher et radios

Les cases à cocher permettent de sélectionner une ou plusieurs options dans une liste tandis que les radios permettent de sélectionner une option parmi plusieurs.

Par défaut (empilé)

< classe d' étiquette = "case à cocher" > 
  < type d'entrée = "case à cocher" valeur = "" >  
  La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial
</label>
 
<label class = "radio" > 
  < type d'entrée = "radio" nom = "optionsRadios" id = "optionsRadios1" valeur = "option1" cochée >     
  La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial
</label>
<label class = "radio" > 
  < type d'entrée = "radio" nom = "optionsRadios" id = "optionsRadios2" valeur = "option2" >    
  L'option deux peut être autre chose et la sélectionner désélectionnera l'option un
</label>

Cases à cocher en ligne

Ajoutez la .inlineclasse à une série de cases à cocher ou de radios pour que les contrôles apparaissent sur la même ligne.

< classe d' étiquette = "case à cocher en ligne" > 
  < type d'entrée = "case à cocher" id = "inlineCheckbox1" valeur = "option1" > 1   
</label>
< classe d' étiquette = "case à cocher en ligne" > 
  < type d'entrée = "case à cocher" id = "inlineCheckbox2" valeur = "option2" > 2   
</label>
< classe d' étiquette = "case à cocher en ligne" > 
  < type d'entrée = "case à cocher" id = "inlineCheckbox3" valeur = "option3" > 3   
</label>

Sélectionne

Utilisez l'option par défaut ou spécifiez a multiple="multiple"pour afficher plusieurs options à la fois.

<sélectionner>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<sélectionner plusieurs = "multiples" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Extension des contrôles de formulaire

En plus des contrôles de navigateur existants, Bootstrap inclut d'autres composants de formulaire utiles.

Entrées préfixées et ajoutées

Ajoutez du texte ou des boutons avant ou après toute saisie textuelle. Notez que selectles éléments ne sont pas pris en charge ici.

Options par défaut

Enveloppez an .add-onet an inputavec l'une des deux classes pour préfixer ou ajouter du texte à une entrée.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Nom d'utilisateur" >    
</div>
<div class = "input-append" > 
  < classe d'entrée = "span2" id = "appendedInput " type = "texte" >   
  <span class = "module complémentaire" > .00 </span> 
</div>

Combiné

Utilisez les deux classes et deux instances de .add-onpour préfixer et ajouter une entrée.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  < classe d'entrée = "span2" id = "appendedPrependedInput " type = "texte" >   
  <span class = "module complémentaire" > .00 </span> 
</div>

Boutons au lieu de texte

Au lieu d'un <span>avec du texte, utilisez un .btnpour attacher un bouton (ou deux) à une entrée.

<div class = "input-append" > 
  < classe d'entrée = "span2" id = "appendedInputButton " type = "texte" >   
  <bouton class = "btn" type = "bouton" > Allez ! </bouton>  
</div>

<div class = "input-append" > 
  < classe d'entrée = "span2" id = "appendedInputButtons " type = "texte" >   
  <bouton class = "btn" type = "bouton" > Rechercher </bouton>  
  <bouton class = "btn" type = "bouton" > Options </bouton>  
</div>

Listes déroulantes des boutons

<div class = "input-append" > 
  < classe d'entrée = "span2" id = "appendedDropdownButton " type = "texte" >   
  <div class = "btn-group" > 
    <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Action
      <span class = "caret" ></span> 
    </bouton>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Action
      <span class = "caret" ></span> 
    </bouton>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  < classe d'entrée = "span2" id = "prependedDropdownButton" type = "texte" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Action
      <span class = "caret" ></span> 
    </bouton>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  < classe d'entrée = "span2" id = "appendedPrependedDropdownButton " type = "texte" >   
  <div class = "btn-group" > 
    <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Action
      <span class = "caret" ></span> 
    </bouton>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

Groupes déroulants segmentés

<forme>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < type d'entrée = "texte" > 
  </div>
  <div class = "input-append" > 
    < type d'entrée = "texte" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Formulaire de recherche

<form class = "form-search" > 
  <div class = "input-append" > 
    < type d'entrée = "texte" class = "requête de recherche span2" >  
    <button type = "submit" class = "btn" > Rechercher </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Rechercher </button>  
    < type d'entrée = "texte" class = "requête de recherche span2" >  
  </div>
</form>

Contrôle de la taille

Utilisez des classes de dimensionnement relatives comme .input-largeou faites correspondre vos entrées aux tailles de colonne de la grille à l'aide de .span*classes.

Entrées de niveau bloc

Faites en sorte que n'importe quel élément <input>ou <textarea>se comporte comme un élément de niveau bloc.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Dimensionnement relatif

< classe d'entrée = "input-mini" type = "texte" placeholder = ".input-mini" >   
< classe d'entrée = "input-small" type = "texte" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
< classe d'entrée = "input-large" type = "texte" placeholder = ".input-large" >   
< classe d'entrée = "input-xlarge" type = "texte" placeholder = ".input-xlarge" >   
< classe d'entrée = "input-xxlarge" type = "texte" placeholder = ".input-xxlarge" >

La tête haute!Dans les futures versions, nous modifierons l'utilisation de ces classes d'entrée relatives pour qu'elles correspondent à la taille de nos boutons. Par exemple, .input-largeaugmentera le rembourrage et la taille de police d'une entrée.

Dimensionnement de la grille

Utilisez .span1to .span12pour les entrées qui correspondent aux mêmes tailles des colonnes de la grille.

< classe d'entrée = "span1" type = "texte" placeholder = ".span1" >   
< classe d'entrée = "span2" type = "texte" placeholder = ".span2" >   
< classe d'entrée = "span3" type = "texte" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Pour plusieurs entrées de grille par ligne, utilisez la .controls-rowclasse de modificateur pour un espacement approprié . Il fait flotter les entrées pour réduire l'espace blanc, définit les marges appropriées et efface le flotteur.

<div class = "controls" > 
  < classe d'entrée = "span5" type = "texte" placeholder = ".span5" >   
</div>
<div class = "contrôles lignes-contrôles" > 
  < classe d'entrée = "span4" type = "texte" placeholder = ".span4" >   
  < classe d'entrée = "span1" type = "texte" placeholder = ".span1" >   
</div>
...

Entrées non modifiables

Présentez les données dans un formulaire qui n'est pas modifiable sans utiliser le balisage de formulaire réel.

<span class = "input-xlarge uneditable-input" > Une valeur ici </span>

Actions de formulaire

Terminer un formulaire par un groupe d'actions (boutons). Lorsqu'ils sont placés dans un .form-actions, les boutons seront automatiquement mis en retrait pour s'aligner avec les contrôles du formulaire.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Enregistrer les modifications </button>  
  <button type = "button" class = "btn" > Annuler </button>  
</div>

Texte d'aide

Prise en charge au niveau de la ligne et du bloc du texte d'aide qui apparaît autour des contrôles de formulaire.

Aide en ligne

<input type = "text" ><span class = "help-inline" > Texte d'aide en ligne </span>

Bloquer l'aide

<input type = "text" ><span class = "help-block" > Un bloc de texte d'aide plus long qui s'interrompt sur une nouvelle ligne et peut s'étendre au-delà d'une ligne. </span>

États de contrôle de formulaire

Fournissez des commentaires aux utilisateurs ou aux visiteurs avec des états de rétroaction de base sur les contrôles et les étiquettes de formulaire.

Mise au point d'entrée

Nous supprimons les styles par défaut outlinesur certains contrôles de formulaire et appliquons un box-shadowà sa place pour :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ceci est ciblé..." >

Entrées invalides

Stylez les entrées via la fonctionnalité de navigateur par défaut avec :invalid. Spécifiez un type, ajoutez l' requiredattribut si le champ n'est pas facultatif et (le cas échéant) spécifiez un pattern.

Ceci n'est pas disponible dans les versions d'Internet Explorer 7-9 en raison du manque de prise en charge des pseudo-sélecteurs CSS.

< classe d'entrée = "span3" type = "e-mail" requis >

Entrées désactivées

Ajoutez l' disabledattribut sur une entrée pour empêcher l'entrée de l'utilisateur et déclencher un aspect légèrement différent.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Entrée désactivée ici..." désactivé >

États de validation

Bootstrap inclut des styles de validation pour les messages d'erreur, d'avertissement, d'information et de réussite. Pour l'utiliser, ajoutez la classe appropriée au fichier .control-group.

<div class = "avertissement du groupe de contrôle" > 
  <label class = "control-label" for = "inputWarning" > Entrée avec avertissement </label>  
  <div class = "controls" > 
    < type d'entrée = "texte" id = "avertissement d'entrée" >  
    <span class = "help-inline" > Quelque chose s'est peut-être mal passé </span> 
  </div>
</div>
 
<div class = "erreur de groupe de contrôle" > 
  <label class = "control-label" for = "inputError" > Entrée avec erreur </label>  
  <div class = "controls" > 
    < type d'entrée = "texte" id = "erreur d'entrée" >  
    <span class = "help-inline" > Veuillez corriger l'erreur </span> 
  </div>
</div>
 
<div class = "informations sur le groupe de contrôle" > 
  <label class = "control-label" for = "inputInfo" > Entrée avec info </label>  
  <div class = "controls" > 
    < type d'entrée = "texte" id = "infos d'entrée" >  
    <span class = "help-inline" > Le nom d' utilisateur est déjà pris </span> 
  </div>
</div>
 
<div class = "réussite du groupe de contrôle" > 
  <label class = "control-label" for = "inputSuccess" > Entrée avec succès </label>  
  <div class = "controls" > 
    < type d'entrée = "texte" id = "entréeSuccès" >  
    <span class = "help-inline" > Woohoo ! </span> 
  </div>
</div>

Boutons par défaut

Les styles de bouton peuvent être appliqués à n'importe quoi avec la .btnclasse appliquée. Cependant, vous souhaiterez généralement les appliquer uniquement aux éléments <a>et <button>pour obtenir le meilleur rendu.

Bouton	classe=""	La description
	`btn`	Bouton gris standard avec dégradé
	`btn btn-primary`	Fournit un poids visuel supplémentaire et identifie l'action principale dans un ensemble de boutons
	`btn btn-info`	Utilisé comme alternative aux styles par défaut
	`btn btn-success`	Indique une action réussie ou positive
	`btn btn-warning`	Indique que des précautions doivent être prises avec cette action
	`btn btn-danger`	Indique une action dangereuse ou potentiellement négative
	`btn btn-inverse`	Bouton gris foncé alternatif, non lié à une action ou à une utilisation sémantique
	`btn btn-link`	Réduire l'importance d'un bouton en le faisant ressembler à un lien tout en conservant le comportement du bouton

Compatibilité entre navigateurs

IE9 ne recadre pas les dégradés d'arrière-plan sur les coins arrondis, nous le supprimons donc. Dans le même ordre d'idées, IE9 jankifie les buttonéléments désactivés, rendant le texte gris avec une ombre de texte désagréable que nous ne pouvons pas corriger.

Tailles des boutons

Envie de boutons plus grands ou plus petits ? Ajoutez .btn-large, .btn-small, ou .btn-minipour des tailles supplémentaires.

<p>
  <bouton class = "btn btn-large btn-primary" type = "bouton" > Grand bouton </bouton>  
  <bouton class = "btn btn-large" type = "bouton" > Grand bouton </bouton>  
</p>
<p>
  <bouton class = "btn btn-primary" type = "bouton" > Bouton par défaut </bouton>  
  <bouton class = "btn" type = "bouton" > Bouton par défaut </bouton>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Petit bouton </button>  
  <button class = "btn btn-small" type = "button" > Petit bouton </button>  
</p>
<p>
  <bouton class = "btn btn-mini btn-primaire" type = "bouton" > Mini bouton </bouton>  
  <bouton class = "btn btn-mini" type = "bouton" > Mini bouton </bouton>  
</p>

Créez des boutons au niveau du bloc (ceux qui s'étendent sur toute la largeur d'un parent) en ajoutant .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Bouton de niveau de bloc </button>  
<button class = "btn btn-large btn-block" type = "button" > Bouton de niveau bloc </button>

État désactivé

Rendez les boutons incliquables en les estompant de 50 %.

Élément d'ancrage

Ajoutez la .disabledclasse aux <a>boutons.

Lien principal Lien

<a href = "#" class = "btn btn-large btn-primary désactivé" > Lien principal </a>  
<a href = "#" class = "btn btn-large désactivé" > Lien </a>

La tête haute!Nous l'utilisons .disabledici comme classe utilitaire, similaire à la .activeclasse commune, donc aucun préfixe n'est requis. De plus, cette classe est uniquement pour l'esthétique ; vous devez utiliser JavaScript personnalisé pour désactiver les liens ici.

Élément de bouton

Ajoutez l' disabledattribut aux <button>boutons.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Bouton principal </button>   
<button type = "button" class = "btn btn-large" désactivé > Bouton </button>

Une classe, plusieurs balises

Utilisez la .btnclasse sur un élément <a>, <button>ou .<input>

<a class = "btn" href = "" > Lien </a>  
<bouton class = "btn" type = "soumettre" > Bouton </bouton>  
< classe d'entrée = "btn" type = "bouton" valeur = "Entrée" >   
< classe d'entrée = "btn" type = "soumettre" valeur = "Soumettre" >

En tant que meilleure pratique, essayez de faire correspondre l'élément à votre contexte pour garantir un rendu compatible entre les navigateurs. Si vous avez un input, utilisez un <input type="submit">pour votre bouton.

Ajoutez des classes à un <img>élément pour styliser facilement les images dans n'importe quel projet.

<img src = "..." class = "img-arrondi" >  
<img src = "..." class = "img-cercle" >  
<img src = "..." class = "img-polaroid" >

La tête haute! .img-roundedet .img-circlene fonctionnent pas dans IE7-8 en raison d'un manque de border-radiussupport.

Glyphes d'icônes

140 icônes sous forme de sprite, disponibles en gris foncé (par défaut) et en blanc, fournies par Glyphicons .

icône-verre
icône-musique
icône-recherche
icône-enveloppe
icône-coeur
icône-étoile
icône-étoile-vide
icône-utilisateur
icone-film
icon-th-large
icône-ème
icône-ème-liste
icône-ok
icône-supprimer
icône-zoom-avant
icône-zoom arrière
icône désactivée
icône-signal
icône-cog
icône-poubelle
icône-accueil
icône-fichier
icône-heure
icône-route
icône-télécharger-alt
téléchargement d'icônes
téléchargement d'icônes
icône-boîte de réception
icon-play-circle
icône-répétition
icon-refresh
icône-liste-alt
icon-lock
icône-drapeau
icône-casque
icône-volume-off
icône-volume-diminué
icon-volume-up
icône-qrcode
icône-code-barres
icône-tag
icon-tags
livre d'icônes
icône-signet
impression d'icônes
icône-caméra
police d'icônes
icône en gras
icône en italique
icône-texte-hauteur
icône-texte-largeur
icône-aligner-gauche
icon-align-center
icône-aligner-droite
icône-aligner-justifier
liste d'icônes
icône-retrait-gauche
icône-indentation-droite
icône-facetime-vidéo
icône-image
icône-crayon
icône-carte-marqueur
icône-ajuster
icône-teinte
icon-edit
partage d'icônes
icône-coche
icône-déplacer
icône-pas-en-arrière
icône-retour rapide
icône-arrière
jeu d'icônes
icône-pause
icône-stop
icône-avant
icône-avance rapide
icône-pas-en-avant
icône-éjecter
icône-chevron-gauche
icône-chevron-droite
icône-plus-signe
icône-signe-moins
icône-supprimer-signe
icône-signe-ok
icône-question-signe
icône-info-signe
icône-capture d'écran
icône-supprimer-cercle
icône-ok-cercle
icône-interdiction-cercle
icône-flèche-gauche
icône-flèche-droite
icône-flèche vers le haut
icône-flèche-bas
icône-partager-alt
icône-redimensionner-plein
icône-redimensionner-petit
icône-plus
icône-moins
icône-astérisque
icône-point-d-exclamation
icône-cadeau
icône-feuille
icône-feu
icône-oeil-ouvert
icône-oeil-fermer
icone-avertissement
icône-plan
icône-calendrier
icône-aléatoire
icône-commentaire
icône-aimant
icône-chevron-vers le haut
icône-chevron-vers le bas
icône-retweet
icône-panier
icône-dossier-fermer
icône-dossier-ouvert
icône-redimensionner-vertical
icône-redimensionner-horizontal
icône-hdd
icône-mégaphone
icône-cloche
icône-certificat
icône-pouce levé
icône-pouce vers le bas
icône-main-droite
icône-main-gauche
icône main levée
icon-hand-down
icône-cercle-flèche-droite
icône-cercle-flèche-gauche
icône-cercle-flèche vers le haut
icône-cercle-flèche-vers le bas
icône-globe
icône-clé
icône-tâches
filtre d'icônes
icone-porte-documents
icône-plein écran

Attribution des glyphicones

Les Glyphicons Halflings ne sont normalement pas disponibles gratuitement, mais un accord entre Bootstrap et les créateurs de Glyphicons a rendu cela possible sans frais pour vous en tant que développeurs. En guise de remerciement, nous vous demandons d'inclure un lien facultatif vers Glyphicons dans la mesure du possible.

Comment utiliser

Toutes les icônes nécessitent une <i>balise avec une classe unique, préfixée par icon-. Pour l'utiliser, placez le code suivant à peu près n'importe où :

<i class = "icon-search" ></i>

Il existe également des styles disponibles pour les icônes inversées (blanches), préparés avec une classe supplémentaire. Nous appliquerons spécifiquement cette classe sur les états de survol et actifs pour les liens de navigation et de liste déroulante.

<i class = "icon-search icon-white" ></i>

La tête haute!Lors de l'utilisation à côté de chaînes de texte, comme dans les boutons ou les liens de navigation, assurez-vous de laisser un espace après la <i>balise pour un espacement approprié.

Exemples d'icônes

Utilisez-les dans des boutons, des groupes de boutons pour une barre d'outils, une navigation ou des entrées de formulaire ajoutées.

Boutons

Groupe de boutons dans une barre d'outils de boutons

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Liste déroulante dans un groupe de boutons

Utilisateur

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Utilisateur </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Modifier </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Supprimer </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Interdire </a></li>  
    <li class = "diviseur" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Faire administrateur </a></li>  
  </ul>
</div>

Tailles des boutons

Étoile Étoile Étoile

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Étoile </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Étoile </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Étoile </a>

La navigation

<ul class = "nav nav-liste" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Accueil </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Bibliothèque </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Applications </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Divers </a></li>  
</ul>

Champs de formulaire

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > Adresse e -mail </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      < classe d'entrée = "span2" id = "inputIcon" type = "texte" >   
    </div>
  </div>
</div>

Typographie

Rubriques

h1. Rubrique 1

h2. Rubrique 2

h3. Rubrique 3

h4. Rubrique 4

h5. Rubrique 5

h6. Rubrique 6

Corps du texte

Copie du corps principal

Construit avec moins

Accent

<small>

Audacieux

Italique

Cours d'alignement

Cours d'accentuation

Abréviations

<abbr>

<abbr class="initialism">

Adresses

<address>

Citations en bloc

Citation par défaut

Options de citation en bloc

Nommer une source

Affichages alternatifs

Listes

Non ordonné

Commandé

Sans style

En ligne

La description

Description horizontale

Code

En ligne

Bloc de base

les tables

Styles par défaut

Cours optionnels

.table-striped

.table-bordered

.table-hover

.table-condensed

Classes de lignes facultatives

Balisage de tableau pris en charge

Formes

Styles par défaut

Dispositions facultatives

Formulaire de recherche

Formulaire en ligne

Forme horizontale

Contrôles de formulaire pris en charge

Contributions

Zone de texte

Cases à cocher et radios

Par défaut (empilé)

Cases à cocher en ligne

Sélectionne

Extension des contrôles de formulaire

Entrées préfixées et ajoutées

Options par défaut

Combiné

Boutons au lieu de texte

Listes déroulantes des boutons

Groupes déroulants segmentés

Formulaire de recherche

Contrôle de la taille

Entrées de niveau bloc

Dimensionnement relatif

Dimensionnement de la grille

Entrées non modifiables

Actions de formulaire

Texte d'aide

Aide en ligne

Bloquer l'aide

États de contrôle de formulaire

Mise au point d'entrée

Entrées invalides

Entrées désactivées

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`