Typographie
Documentation et exemples pour la typographie Bootstrap, y compris les paramètres globaux, les en-têtes, le corps du texte, les listes, etc.
Paramètres globaux
Bootstrap définit les styles d'affichage, de typographie et de lien globaux de base. Lorsque plus de contrôle est nécessaire, consultez les classes d'utilitaires textuels .
- Utilisez une pile de polices native qui sélectionne la meilleure
font-family
pour chaque système d'exploitation et appareil. - Pour une échelle de type plus inclusive et accessible, nous utilisons la racine par défaut du navigateur
font-size
(généralement 16 pixels) afin que les visiteurs puissent personnaliser les paramètres par défaut de leur navigateur selon leurs besoins. - Utilisez les attributs
$font-family-base
,$font-size-base
et$line-height-base
comme base typographique appliquée au<body>
. - Définissez la couleur globale du lien via
$link-color
. - Utilisez
$body-bg
pour régler abackground-color
sur<body>
(#fff
par défaut).
Ces styles se trouvent dans _reboot.scss
, et les variables globales sont définies dans _variables.scss
. Assurez-vous de $font-size-base
définir rem
.
Rubriques
Tous les titres HTML, <h1>
à <h6>
, sont disponibles.
Titre | Exemple |
---|---|
<h1></h1> |
h1. En-tête bootstrap |
<h2></h2> |
h2. En-tête bootstrap |
<h3></h3> |
h3. En-tête bootstrap |
<h4></h4> |
h4. En-tête bootstrap |
<h5></h5> |
h5. En-tête bootstrap |
<h6></h6> |
h6. En-tête bootstrap |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
à travers .h6
les classes sont également disponibles, lorsque vous souhaitez faire correspondre le style de police d'un titre mais ne pouvez pas utiliser l'élément HTML associé.
h1. En-tête bootstrap
h2. En-tête bootstrap
h3. En-tête bootstrap
h4. En-tête bootstrap
h5. En-tête bootstrap
h6. En-tête bootstrap
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
Personnaliser les en-têtes
Utilisez les classes utilitaires incluses pour recréer le petit texte d'en-tête secondaire de Bootstrap 3.
En -tête d'affichage fantaisie Avec texte secondaire estompé
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Afficher les rubriques
Les éléments de titre traditionnels sont conçus pour fonctionner au mieux dans le contenu de votre page. Lorsque vous avez besoin d'un titre pour vous démarquer, envisagez d'utiliser un titre d'affichage - un style de titre plus grand et légèrement plus opiniâtre.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Les en-têtes d'affichage sont configurés via la $display-font-sizes
carte Sass et deux variables, $display-font-weight
et $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
Conduire
Faites ressortir un paragraphe en ajoutant .lead
.
Ceci est un premier paragraphe. Il se démarque des paragraphes réguliers.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Éléments de texte en ligne
Style pour les éléments HTML5 intégrés courants.
Vous pouvez utiliser la balise de marque poursoulignertexte.
Cette ligne de texte est destinée à être traitée comme du texte supprimé.
Cette ligne de texte est destinée à être traitée comme n'étant plus exacte.
Cette ligne de texte est destinée à être traitée comme un ajout au document.
Cette ligne de texte sera rendue comme soulignée.
Cette ligne de texte doit être traitée comme des petits caractères.
Cette ligne est rendue sous forme de texte en gras.
Cette ligne est rendue sous forme de texte en italique.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Attention, ces balises doivent être utilisées à des fins sémantiques :
<mark>
représente le texte qui est marqué ou mis en surbrillance à des fins de référence ou de notation.<small>
représente les commentaires secondaires et les petits caractères, comme le droit d'auteur et le texte légal.<s>
représente un élément qui n'est plus pertinent ou qui n'est plus exact.<u>
représente une étendue de texte en ligne qui doit être rendu d'une manière qui indique qu'il a une annotation non textuelle.
Si vous souhaitez styliser votre texte, vous devez plutôt utiliser les classes suivantes :
.mark
appliquera les mêmes styles que<mark>
..small
appliquera les mêmes styles que<small>
..text-decoration-underline
appliquera les mêmes styles que<u>
..text-decoration-line-through
appliquera les mêmes styles que<s>
.
Bien que cela ne soit pas indiqué ci-dessus, 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.
Utilitaires de texte
Modifiez l'alignement, la transformation, le style, l'épaisseur, la hauteur de ligne, la décoration et la couleur du texte avec nos utilitaires de texte et de couleur .
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 ont un soulignement par défaut et gagnent un curseur d'aide pour fournir un contexte supplémentaire au survol et aux utilisateurs de technologies d'assistance.
Ajouter .initialism
à une abréviation pour une taille de police légèrement plus petite.
attribut
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Citations en bloc
Pour citer des blocs de contenu provenant d'une autre source dans votre document. Enveloppez <blockquote class="blockquote">
n'importe quel HTML comme citation.
Une citation bien connue, contenue dans un élément blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Nommer une source
La spécification HTML exige que l'attribution de bloc de citation soit placée en dehors du <blockquote>
. Lorsque vous fournissez une attribution, enveloppez votre <blockquote>
dans un <figure>
et utilisez un <figcaption>
ou un élément de niveau bloc (par exemple, <p>
) avec la .blockquote-footer
classe. Assurez-vous d'inclure <cite>
également le nom de l'œuvre source.
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Alignement
Utilisez des utilitaires de texte au besoin pour modifier l'alignement de votre bloc de citation.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Listes
Sans style
Supprimez la marge par défaut list-style
et la marge de gauche des éléments de liste (enfants immédiats uniquement). Cela s'applique uniquement aux éléments de liste enfants immédiats , ce qui signifie que vous devrez également ajouter la classe pour toutes les listes imbriquées.
- Ceci est une liste.
- Il apparaît complètement sans style.
- Structurellement, c'est toujours une liste.
- Cependant, ce style ne s'applique qu'aux éléments enfants immédiats.
- Listes imbriquées :
- ne sont pas affectés par ce style
- montrera toujours une balle
- et avoir une marge de gauche appropriée
- Cela peut toujours être utile dans certaines situations.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
En ligne
Supprimez les puces d'une liste et appliquez un peu de lumière margin
avec une combinaison de deux classes, .list-inline
et .list-inline-item
.
- Il s'agit d'un élément de liste.
- Et un autre.
- Mais ils sont affichés en ligne.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
Alignement de la liste de description
Alignez les termes et les descriptions horizontalement en utilisant les classes prédéfinies de notre système de grille (ou mixins sémantiques). Pour des termes plus longs, vous pouvez éventuellement ajouter une .text-truncate
classe pour tronquer le texte avec des points de suspension.
- Listes de descriptions
- Une liste de description est parfaite pour définir les termes.
- Terme
-
Définition du terme.
Et un peu plus de texte de définition d'espace réservé.
- Un autre terme
- Cette définition est courte, donc pas de paragraphes supplémentaires ou quoi que ce soit.
- Le terme tronqué est tronqué
- Cela peut être utile lorsque l'espace est restreint. Ajoute des points de suspension à la fin.
- Nidification
-
- Liste de définitions imbriquées
- Je vous ai entendu aimer les listes de définitions. Permettez-moi de mettre une liste de définitions dans votre liste de définitions.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
Tailles de police réactives
Dans Bootstrap 5, nous avons activé les tailles de police réactives par défaut, permettant au texte de s'adapter plus naturellement à toutes les tailles d'appareils et de fenêtres. Consultez la page RFS pour savoir comment cela fonctionne.
Toupet
variables
Les titres ont des variables dédiées pour le dimensionnement et l'espacement.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
Divers éléments de typographie couverts ici et dans Reboot ont également des variables dédiées.
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Mélanges
Il n'y a pas de mixins dédiés à la typographie, mais Bootstrap utilise Responsive Font Sizing (RFS) .