Bootstrap Typographie
Bootstrap utilise Helvetica Neue, Helvetica, Arial et sans-serif comme pile de polices par défaut.
Avec les fonctionnalités typographiques de Bootstrap, vous pouvez créer des titres, des paragraphes, des listes et d'autres éléments en ligne.
Titres
Bootstrap définit des styles pour tous les titres HTML (h1 à h6). Voir l'exemple ci-dessous :
Exemple
Essayez-le vous-même »
Le résultat est le suivant :
Sous-titres en ligne
Si vous souhaitez ajouter un sous-titre en ligne à n'importe quel titre, ajoutez simplement <small> à côté de l'élément, ou ajoutez.smallcomme classe, afin d'obtenir un texte avec une taille de police plus petite et une couleur plus claire, comme le montre l'exemple ci-dessous :
Exemple
Essayez-le vous-même »
Le résultat est le suivant :
Corps de texte principal
Pour mettre en évidence du texte dans un paragraphe, vous pouvez ajouter class="lead", ce qui produira un texte plus grand, plus gras avec une hauteur de ligne plus élevée, comme le montre l'exemple ci-dessous :
Exemple
Essayez-le vous-même »
Le résultat est le suivant :
Mise en évidence
Les balises de mise en évidence par défaut de HTML <small> (définit le texte à 85% de la taille du texte parent), <strong> (définit le texte en gras), <em> (définit le texte en italique).
Bootstrap fournit quelques classes pour mettre en évidence du texte, comme le montre l'exemple ci-dessous :
Exemple
Essayez-le vous-même »
Le résultat est le suivant :
Abréviations
HTML L'élément fournit un balisage pour les abréviations, telles que WWW ou HTTP. Bootstrap définit le style de l'élément <abbr> comme une bordure en pointillés affichée en bas du texte, et lorsque la souris le survole, le texte complet est affiché (à condition que vous ayez ajouté du texte à l'attribut title de <abbr>). Pour obtenir un texte avec une police plus petite, ajoutez .initialism à <abbr>.
Exemple
Essayez-le »
Le résultat est le suivant :
Adresse
Utilisez<address>balise, vous pouvez afficher les coordonnées sur la page web. Comme<address>a par défaut la valeurdisplay:block;, vous devez utiliser<br>balise pour ajouter des sauts de ligne au texte d'adresse inclus.
Exemple
Essayez-le »
Le résultat est le suivant :
Blockquote
Vous pouvez utiliser le <blockquote> par défaut à côté de n'importe quel texte HTML. Les autres options incluent l'ajout d'une balise <small> pour identifier la source de la citation ; l'utilisation de la classe.pull-rightaligne la citation à droite. L'exemple suivant illustre ces fonctionnalités :
Exemple
Essayez-le »
Le résultat est le suivant :
Listes
Bootstrap prend en charge les listes ordonnées, les listes non ordonnées et les listes de définitions.
- Liste ordonnée: Une liste ordonnée est une liste qui commence par des chiffres ou d'autres caractères ordonnés.
- Liste non ordonnée: Une liste non ordonnée est une liste sans ordre spécifique, une liste qui commence par des puces de style traditionnel. Si vous ne voulez pas afficher ces puces, vous pouvez utiliser la classe.list-unstyledpour supprimer le style. Vous pouvez également utiliser la classe.list-inlinepour placer tous les éléments de liste sur la même ligne.
- Liste de définitions: Dans ce type de liste, chaque élément de liste peut contenir des éléments <dt> et <dd>. <dt> signifieterme de définition, comme dans un dictionnaire. Ensuite, <dd> est la description de <dt>.
.dl-horizontalpeut faire<dl>les phrases et leurs descriptions à l'intérieur s'alignent en une rangée. Cela commence comme<dl>les styles par défaut sont empilés ensemble, et à mesure que la navbar s'étend progressivement, ils sont disposés en une rangée.
L'exemple suivant illustre ces types de listes :
Exemple
Essayez-le »
Le résultat est le suivant :
Autres classes de typographie
Le tableau suivant fournit des exemples d'autres classes de typographie Bootstrap :
| Classe | Description | Exemple |
|---|---|---|
| .lead | Faire ressortir un paragraphe | Essayez-le |
| .small | Définir un texte petit (défini à 85% de la taille du texte parent) | Essayez-le |
| .text-left | Définir le texte aligné à gauche | Essayez-le |
| .text-center | Définir le texte centré | Essayez-le |
| .text-right | Aligner le texte à droite | Essayez-le |
| .text-justify | Justifier le texte ; le texte d’un paragraphe qui dépasse l’écran passe automatiquement à la ligne | Essayez-le |
| .text-nowrap | Le texte d’un paragraphe qui dépasse l’écran ne passe pas à la ligne | Essayez-le |
| .text-lowercase | Mettre le texte en minuscules | Essayez-le |
| .text-uppercase | Mettre le texte en majuscules | Essayez-le |
| .text-capitalize | Mettre la première lettre de chaque mot en majuscule | Essayez-le |
| .initialism | Le texte affiché dans l'élément <abbr> s'affiche dans une petite police et peut convertir les lettres minuscules en majuscules | Essayez-le |
| .blockquote-reverse | Définir la citation alignée à droite | Essayez-le |
| .list-unstyled | Supprime le style de liste par défaut, les éléments de liste sont alignés à gauche (dans <ul> et <ol>). Cette classe s'applique uniquement aux éléments de liste enfants directs (si vous devez supprimer les éléments de liste imbriqués, vous devez utiliser ce style dans la liste imbriquée). | Essayez-le |
| .list-inline | Placer tous les éléments de liste sur la même ligne | Essayez-le |
| .dl-horizontal | Cette classe définit le float et le décalage, appliqués aux éléments <dl> et <dt>. Pour une implémentation spécifique, voir l'exemple. | Essayez-le |
| .pre-scrollable | Rendre l'élément <pre> défilable. La zone de bloc de code a une hauteur maximale de 340px. Une fois cette hauteur dépassée, une barre de défilement apparaîtra sur l'axe Y. | Essayez-le |