Bootstrap - Typographie
Bootstrap utilise Helvetica Neue, Helvetica, Arial et sans-serif dans sa pile de polices par défaut. En utilisant la fonction de typographie de Bootstrap, vous pouvez créer des en-têtes, des paragraphes, des listes et d'autres éléments en ligne. Voyons chacun d'entre eux dans les sections suivantes.
Titres
Tous les en-têtes HTML (h1 à h6) sont stylés dans Bootstrap. Un exemple est montré ci-dessous -
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>Le segment de code ci-dessus avec Bootstrap produira le résultat suivant -
Sous-titres en ligne
Pour ajouter un sous-titre en ligne à l'un des en-têtes, ajoutez simplement <small> autour de l'un des éléments ou ajoutez .small classe et vous obtiendrez un texte plus petit dans une couleur plus claire, comme indiqué dans l'exemple ci-dessous -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>Le segment de code ci-dessus avec Bootstrap produira le résultat suivant -
Copie du corps principal
Pour ajouter de l'emphase à un paragraphe, ajoutez class = "lead". Cela vous donnera une taille de police plus grande, un poids plus léger et une hauteur de ligne plus grande comme dans l'exemple suivant -
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>Accentuation
Les balises de mise en évidence par défaut de HTML, telles que <small>, définissent le texte à 85% de la taille du parent, <strong> accentuent un texte avec un poids de police plus lourd et <em> accentuent un texte en italique.
Bootstrap propose quelques classes qui peuvent être utilisées pour mettre l'accent sur les textes, comme le montre l'exemple suivant -
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>Abréviations
L'élément HTML <abbr> fournit un balisage pour les abréviations ou les acronymes, comme WWW ou HTTP. Bootstrap styles les éléments <abbr> avec une bordure en pointillé clair en bas et révèle le texte intégral au survol (tant que vous ajoutez ce texte à l'attribut title <abbr>). Pour obtenir une taille de police légèrement plus petite, ajoutez .initialism à <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>Adresses
En utilisant la balise <address>, vous pouvez afficher les informations de contact sur votre page Web. Étant donné que <adresse> affiche par défaut: block; vous devrez utiliser
Balises pour ajouter des sauts de ligne au texte d'adresse inclus.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>Blockquotes
Vous pouvez utiliser le <blockquote> par défaut autour de n'importe quel texte HTML. D'autres options incluent l'ajout d'une balise <small> pour identifier la source du devis et l'alignement à droite du blockquote à l'aide de la classe .pull-right . L'exemple suivant montre toutes ces fonctionnalités -
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>Listes
Bootstrap prend en charge les listes ordonnées, les listes non ordonnées et les listes de définitions.
Ordered lists - Une liste ordonnée est une liste qui tombe dans une sorte d'ordre séquentiel et est précédée de nombres.
Unordered lists- Une liste non ordonnée est une liste qui n'a pas d'ordre particulier et qui est traditionnellement stylisée avec des puces. Si vous ne souhaitez pas que les puces apparaissent, vous pouvez supprimer le style à l'aide de la classe .list-unstyled . Vous pouvez également placer tous les éléments de liste sur une seule ligne à l'aide de la classe .list-inline .
Definition lists- Dans ce type de liste, chaque élément de liste peut être composé à la fois des éléments <dt> et <dd>. <dt> représente le terme de définition , et comme un dictionnaire, c'est le terme (ou la phrase) qui est défini. Par la suite, le <dd> est la définition du <dt>. Vous pouvez aligner les termes et descriptions dans <dl> côte à côte en utilisant la classe dl-horizontal .
L'exemple suivant illustre chacun de ces types -
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>