Échelle typographique

Toute la grille typographique est basée sur deux variables Less de notre fichier 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 pour créer les marges, les rembourrages et les hauteurs de ligne de tous nos types et plus encore.

Exemple de corps de texte

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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Utiliser l'emphase

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mécène faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Remarque : N'hésitez pas à utiliser <b>et <i>en HTML5, mais leur utilisation a un peu changé. <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.

Exemples d'adresses

Voici deux exemples d'utilisation de la <address>balise :

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

Nom complet
[email protected]

Exemples d'abréviations

Les abréviations avec un titleattribut ont une bordure inférieure en pointillé clair et un curseur d'aide au survol. Cela donne aux utilisateurs une indication supplémentaire que quelque chose sera affiché au survol.

Ajoutez la initialismclasse à une abréviation pour augmenter l'harmonie typographique en lui donnant une taille de texte légèrement plus petite.

HTML est la meilleure chose depuis le pain en tranches.

Une abréviation du mot attribut est attr .

Pour inclure un blockquote, enveloppez <blockquote>n'importe quel code HTML en tant que devis. Pour les citations droites, nous recommandons un <p>.

Incluez un <small>élément facultatif pour citer votre source et vous obtiendrez un tiret em —devant celui-ci à des fins de style.

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

Les blocs de citations par défaut sont stylisés comme suit :

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

Quelqu'un de célèbre dans Body of work

Pour faire flotter votre blockquote vers la droite, ajoutez class="pull-right":

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

Quelqu'un de célèbre dans Body of work

Non ordonné

<ul>

• 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

Sans style

<ul class="unstyled">

• 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

Commandé

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing élite
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

La description

<dl>

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.

Description horizontale

<dl class="dl-horizontal">

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.

En ligne

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

Par exemple , la section < code> </ code > doit être enveloppée 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>

Remarque : veillez à 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.

Google embellir

Prenez le même <pre>élément et ajoutez deux classes facultatives pour un rendu amélioré.

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

<pre class = "prettyprint 
     linenums" >
  <p>Exemple de texte ici...</p>
</pre>

Téléchargez google-code-prettify et consultez le fichier readme pour savoir comment l'utiliser.

É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) Doit être utilisée dans un<thead>
<caption>	Description ou résumé de ce que contient le tableau, particulièrement utile pour les lecteurs d'écran

<tableau>
  <tête>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Les tableaux sont automatiquement stylés avec seulement quelques bordures pour assurer la lisibilité et maintenir la structure. Avec la 2.0, la .tableclasse s'impose.

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

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

Obtenez un peu de fantaisie avec vos tables en ajoutant des rayures zébrées - ajoutez simplement la .table-stripedclasse.

Remarque : Les tableaux rayés utilisent le :nth-childsélecteur CSS et ne sont pas disponibles dans IE7-IE8.

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

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

Ajoutez des bordures autour de la table entière et des coins arrondis à des fins esthétiques.

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

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

Rendez vos tableaux plus compacts en ajoutant la .table-condensedclasse pour réduire de moitié le rembourrage des cellules de tableau (de 8px à 4px).

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

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

N'hésitez pas à combiner l'une des classes de table pour obtenir des looks différents en utilisant l'une des classes disponibles.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

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

HTML et CSS flexibles

La meilleure partie des formulaires dans Bootstrap est que toutes vos entrées et commandes ont fière allure, quelle que soit la façon dont vous les construisez dans votre balisage. Aucun code HTML superflu n'est requis, mais nous fournissons les modèles pour ceux qui en ont besoin.

Les mises en page plus compliquées sont accompagnées de classes succinctes et évolutives pour un style et une liaison d'événements faciles, de sorte que vous êtes couvert à chaque étape.

Quatre mises en page incluses

Bootstrap prend en charge quatre types de mises en page de formulaire :

• Verticale (par défaut)
• Chercher
• En ligne
• Horizontal

Différents types de mises en page de formulaire nécessitent des modifications du balisage, mais les contrôles eux-mêmes restent et se comportent de la même manière.

États de contrôle et plus

Les formulaires de Bootstrap incluent des styles pour tous les contrôles de formulaire de base tels que l'entrée, la zone de texte et la sélection que vous attendez. Mais il est également livré avec un certain nombre de composants personnalisés tels que des entrées ajoutées et ajoutées et la prise en charge de listes de cases à cocher.

Des états comme erreur, avertissement et succès sont inclus pour chaque type de contrôle de formulaire. Sont également inclus les styles pour les contrôles désactivés.

Forme basique

Avec la v2.0, nous avons des valeurs par défaut plus légères et plus intelligentes pour les styles de formulaire. Pas de balisage supplémentaire, juste des contrôles de formulaire.

Nom de l'étiquette Texte d'aide associé !

Exemple de texte d'aide au niveau du bloc ici.

Vérifiez-moi Soumettre

< classe de formulaire = "bien" > 
  <label> Nom du label </label>
  <input type = "text" class = "span3" placeholder = "Tapez quelque chose…" >   
  <span class = "help-inline" > Texte d'aide associé ! </span> 
  < classe d' étiquette = "case à cocher" > 
    <input type = "case à cocher" > Découvrez-moi 
  </label>
  <button type = "submit" class = "btn" > Soumettre </button>  
</form>

Formulaire de recherche

Reflétant les styles WebKit par défaut, ajoutez simplement .form-searchdes champs de recherche arrondis supplémentaires.

Chercher

<form class = "well 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

Les entrées sont au niveau du bloc pour commencer. Pour .form-inlineet .form-horizontal, nous utilisons inline-block.

Souviens-toi de moi S'identifier

<form class = "well 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>

Contrôles que Bootstrap prend en charge

Saisie de texte

En plus du texte de forme libre, toute entrée textuelle HTML5 apparaît comme suit.

Case à cocher

La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial

Sélectionner la liste

quelque chose 2 3 4 5

Multicon-select

1 2 3 4 5

Entrée de fichier

Zone de texte

Sauvegarder les modifications Annuler

Exemple de balisage

Compte tenu de l'exemple de disposition de formulaire ci-dessus, voici le balisage associé au premier groupe d'entrée et de contrôle. Les classes , et sont toutes requises pour le .control-groupstyle .control-label..controls

<form class = "form-horizontal" > 
  <ensemble de champs>
    <legend> Texte de la légende </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Saisie de texte </label>  
      <div class = "controls" > 
        < type d'entrée = "texte" classe = "entrée-xlarge" id = "entrée01" >   
        <p class = "help-block" > Texte d'aide à l'appui </p> 
      </div>
    </div>
  </fieldset>
</form>

Ce qui est inclu

Tous les contrôles de formulaire par défaut que nous prenons en charge sont affichés à gauche. Voici la liste à puces :

• saisies de texte (texte, mot de passe, e-mail, etc.)
• case à cocher
• radio
• sélectionner
• sélection multiple
• entrée de fichier
• zone de texte

---

Nouveaux paramètres par défaut avec la v2.0

Jusqu'à la v1.4, les styles de formulaire par défaut de Bootstrap utilisaient la disposition horizontale. Avec Bootstrap 2, nous avons supprimé cette contrainte pour avoir des valeurs par défaut plus intelligentes et plus évolutives pour n'importe quel formulaire.

États de contrôle de formulaire

Entrée ciblée

Entrée non modifiable

Une certaine valeur ici

Entrée désactivée

Case à cocher désactivée

Ceci est une case à cocher désactivée

Entrée avec avertissement

Quelque chose a peut-être mal tourné

Entrée avec erreur

Merci de corriger l'erreur

Entrée avec succès

Woohoo !

Sélectionnez avec succès

1 2 3 4 5 Woohoo !

Sauvegarder les modifications Annuler

États du navigateur repensés

disabledBootstrap propose des styles pour les focus et les états pris en charge par le navigateur . Nous supprimons le Webkit par défaut outlineet appliquons un box-shadowà sa place pour :focus.

---

Validation du formulaire

Il inclut également des styles de validation pour les erreurs, les avertissements et la réussite. Pour l'utiliser, ajoutez la classe d'erreur au fichier .control-group.

<jeu de champs
  class = "erreur de groupe de contrôle" >
  …
</fieldset>

Extension des contrôles de formulaire

Tailles de grille de formulaire

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Utilisez les mêmes .span*classes du système de grille pour les tailles d'entrée.

Tailles alternatives

Vous pouvez également utiliser des classes statiques qui ne correspondent pas à la grille, s'adaptent aux styles CSS réactifs ou prennent en compte différents types de contrôles (par exemple, inputvs. select).

Texte ajouté

@

Voici un texte d'aide

Texte ajouté

.00

Voici plus de texte d'aide

Ajouter et préfixer

$ .00

Ajouter avec le bouton

Aller!

Cases à cocher en ligne

1 2 3

Cases à cocher

La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial La deuxième option peut également être cochée et incluse dans les résultats du formulaire L'option trois peut - oui, vous l'avez deviné - également être cochée et incluse dans les résultats du formulaire

Remarque : les étiquettes entourent toutes les options pour des zones de clic beaucoup plus grandes et une forme plus utilisable.

Boutons radio

La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial L'option deux peut être autre chose et la sélectionner désélectionnera l'option un

Sauvegarder les modifications Annuler

Préfixer et ajouter des entrées

Les groupes de saisie, avec du texte ajouté ou ajouté au début, offrent un moyen simple de donner plus de contexte à vos entrées. De bons exemples incluent le signe @ pour les noms d'utilisateur Twitter ou $ pour les finances.

---

Cases à cocher et radios

Jusqu'à la v1.4, Bootstrap nécessitait un balisage supplémentaire autour des cases à cocher et des radios pour les empiler. Maintenant, c'est une simple question de répéter le <label class="checkbox">qui enveloppe le <input type="checkbox">.

Les cases à cocher et les radios en ligne sont également prises en charge. Ajoutez simplement .inlineà n'importe quel .checkboxou .radioet vous avez terminé.

---

Formulaires en ligne et ajout/préfixe

Pour utiliser des entrées préfixées ou ajoutées dans un formulaire en ligne, assurez-vous de placer le .add-onet inputsur la même ligne, sans espaces.

---

Texte d'aide du formulaire

Pour ajouter du texte d'aide pour vos entrées de formulaire, incluez le texte d'aide en ligne avec <span class="help-inline">ou un bloc de texte d'aide avec <p class="help-block">après l'élément d'entrée.

Boutons pour les actions

Par convention, les boutons ne doivent être utilisés que pour les actions tandis que les hyperliens doivent être utilisés pour les objets. Par exemple, "Télécharger" devrait être un bouton tandis que "l'activité récente" devrait être un lien.

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

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.

Plusieurs tailles

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

Mesure principale Action

Mesure principale Action

Mesure principale Action

État désactivé

Pour les boutons désactivés, ajoutez la .disabledclasse aux liens et l' disabledattribut aux <button>éléments.

Lien principal Lien

Bouton principal Bouton

La tête haute! Nous l'utilisons .disabledici comme classe utilitaire, similaire à la .activeclasse commune, donc aucun préfixe n'est requis.

Une classe, plusieurs balises

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

Lien Bouton

<a class = "btn" href = "" > Lien </a>  
<bouton classe = "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 inter-navigateur correspondant. Si vous avez un input, utilisez un <input type="submit">pour votre bouton.

• 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

Construit comme un sprite

Au lieu de faire de chaque icône une requête supplémentaire, nous les avons compilées dans un sprite - un tas d'images dans un fichier qui utilise CSS pour positionner les images avec background-position. C'est la même méthode que nous utilisons sur Twitter.com et cela a bien fonctionné pour nous.

Toutes les classes d'icônes sont préfixées par .icon-pour un espacement des noms et une portée appropriés, tout comme nos autres composants. Cela aidera à éviter les conflits avec d'autres outils.

Glyphicons nous a accordé l'utilisation de l'ensemble Halflings dans notre boîte à outils open source tant que nous fournissons un lien et un crédit ici dans la documentation. Veuillez envisager de faire de même dans vos projets.

Comment utiliser

Bootstrap utilise une <i>balise pour toutes les icônes, mais elles n'ont pas de classe de cas, uniquement un préfixe partagé. 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 :

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

Vous avez le choix entre 120 classes pour vos icônes. Ajoutez simplement une <i>balise avec les bonnes classes et vous êtes prêt. Vous pouvez trouver la liste complète dans sprites.less ou ici même dans ce document.

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

Cas d'utilisation

Les icônes, c'est bien, mais où les utiliserait-on ? Voici quelques idées:

• En tant que visuels pour votre navigation dans la barre latérale
• Pour une navigation purement iconique
• Pour que les boutons aident à transmettre le sens d'une action
• Avec des liens pour partager le contexte sur la destination d'un utilisateur

Essentiellement, partout où vous pouvez mettre une <i>étiquette, vous pouvez mettre une icône.

Rafraîchir Vérifier Effacer

Commentaire Réglages Plus d'informations

Adresse e-mail