in English

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-familypour 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-baseet $line-height-basecomme base typographique appliquée au <body>.
  • Définissez la couleur globale du lien via $link-coloret appliquez les soulignements de lien uniquement sur :hover.
  • Utilisez $body-bgpour régler a background-colorsur <body>( #fffpar défaut).

Ces styles se trouvent dans _reboot.scss, et les variables globales sont définies dans _variables.scss. Assurez-vous de $font-size-basedé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 .h6les 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. Gardez à l'esprit que ces titres ne sont pas réactifs par défaut, mais il est possible d'activer des tailles de police réactives .

Affichage 1
Affichage 2
Affichage 3
Affichage 4 
<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>

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>

.market .smalldes classes sont également disponibles pour appliquer les mêmes styles au fur <mark>et à mesure <small>tout en évitant les implications sémantiques indésirables que les balises apporteraient.

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 et la couleur du texte avec nos utilitaires de texte et nos utilitaires 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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Nommer une source

Ajoutez un <footer class="blockquote-footer">pour identifier la source. Enveloppez le nom du travail source dans <cite>.

Une citation bien connue, contenue dans un élément blockquote.

Quelqu'un de célèbre dans le titre de la source 
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alignement

Utilisez des utilitaires de texte au besoin pour modifier l'alignement de votre bloc de citation.

Une citation bien connue, contenue dans un élément blockquote.

Quelqu'un de célèbre dans le titre de la source 
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Une citation bien connue, contenue dans un élément blockquote.

Quelqu'un de célèbre dans le titre de la source 
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Listes

Sans style

Supprimez la marge par défaut list-styleet 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 marginavec une combinaison de deux classes, .list-inlineet .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-truncateclasse 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

À partir de la v4.3.0, Bootstrap est livré avec l'option d'activer des tailles de police réactives, permettant au texte de s'adapter plus naturellement à toutes les tailles d'appareil et de fenêtre d'affichage. RFS peut être activé en changeant la $enable-responsive-font-sizesvariable Sass en trueet en recompilant Bootstrap.

Pour prendre en charge RFS , nous utilisons un mixin Sass pour remplacer nos font-sizepropriétés normales. Les tailles de police réactives seront compilées dans calc()des fonctions avec un mélange d' remunités et de fenêtres pour activer le comportement de mise à l'échelle réactive. Vous trouverez plus d'informations sur RFS et sa configuration sur son référentiel GitHub .