Bootstrap - Typographie
Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde merveilleux de la typographie Bootstrap. En tant que votre enseignant bienveillant en informatique, je suis là pour vous guider à travers ce voyage avec plein d'exemples, des explications, et peut-être un ou deux blagues de papa. Alors, c'est parti !
Paramètres par défaut / globaux de Bootstrap
Bootstrap arrive avec quelques paramètres de typographie par défaut qui rendent votre texte magnifique dès la sortie de la boîte. C'est comme avoir un styliste personnel pour votre site web !
Voici un exemple de base de la manière dont Bootstrap style le texte :
<p>Ceci est un paragraphe stylé par Bootstrap.</p>Vous pourriez penser : "Ça a l'air exactement comme du texte régulier !" Et vous avez raison ! Mais Bootstrap a fait quelques améliorations subtiles. Il a défini une police par défaut (généralement une police sans serif), une taille de police confortable et une hauteur de ligne plaisante. Ce sont ces petites choses qui rendent Bootstrap si puissant.
Titres
Les titres dans Bootstrap sont comme les différentes tailles de café dans votre café préféré - ils existent en six saveurs, de h1 à h6.
<h1>Ceci est un titre 1</h1>
<h2>Ceci est un titre 2</h2>
<h3>Ceci est un titre 3</h3>
<h4>Ceci est un titre 4</h4>
<h5>Ceci est un titre 5</h5>
<h6>Ceci est un titre 6</h6>Chaque titre a sa propre taille et poids, créant une hiérarchie claire dans votre contenu. C'est comme organiser votre placard - tout a sa place !
Personnalisation des titres
Mais que faire si vous voulez utiliser les styles de titre sans utiliser réellement une balise de titre ? Bootstrap vous couvre avec les classes .h1 à .h6.
<p class="h1">Ce paragraphe ressemble à un titre 1</p>
<span class="h3">Ce span ressemble à un titre 3</span>C'est génial lorsque vous voulez l'apparence d'un titre sans la signification sémantique. C'est comme porter une chemise de smoking - chic, mais pas trop chic.
Titres d'affichage
Lorsque les titres réguliers ne suffisent pas, Bootstrap offre des titres "display". Ceux-ci sont comme les supermodels des titres - grands, audacieux et accrocheurs.
<h1 class="display-1">Affichage 1</h1>
<h1 class="display-2">Affichage 2</h1>
<h1 class="display-3">Affichage 3</h1>
<h1 class="display-4">Affichage 4</h1>Ces titres d'affichage sont parfaits pour les moments où vous devez faire une grande déclaration. Utilisez-les avec modération, cependant - trop et votre page pourrait commencer à crier !
Texte en vedette
La classe .lead est la manière de Bootstrap de faire ressortir un paragraphe. C'est comme donner à votre texte un mégaphone.
<p class="lead">Ceci est un paragraphe en vedette. Il se distingue des paragraphes réguliers.</p>Utilisez ceci pour du texte d'introduction ou des informations importantes que vous souhaitez mettre en avant.
Abréviations
Bootstrap style les abréviations et les acronymes avec une soulignure pointillée. C'est comme donner à vos lecteurs un cadenas secret !
<p>L'<abbr title="Organisation mondiale de la santé">OMS</abbr> a été fondée en 1948.</p>Survolez l'abréviation, et vous verrez apparaître le terme complet.
Citation
Les citations dans Bootstrap sont stylées pour se démarquer du reste de votre texte. Elles sont comme les cool kids du monde des paragraphes.
<blockquote class="blockquote">
<p>Deux choses sont infinies : l'univers et la stupidité humaine ; et je ne suis pas sûr de l'univers.</p>
</blockquote>Mentionner une source
Vous pouvez ajouter une source à votre citation en utilisant la balise <footer> avec une classe de blockquote-footer.
<blockquote class="blockquote">
<p>Deux choses sont infinies : l'univers et la stupidité humaine ; et je ne suis pas sûr de l'univers.</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>C'est comme donner du crédit là où il est dû, mais avec du style !
Alignement
Bootstrap vous permet d'aligner facilement votre texte avec des classes. C'est comme apprendre à votre texte à danser - à gauche, au centre, à droite !
<p class="text-left">Texte aligné à gauche.</p>
<p class="text-center">Texte aligné au centre.</p>
<p class="text-right">Texte aligné à droite.</p>Éléments de texte en ligne
Bootstrap fournit des styles pour divers éléments de texte en ligne. C'est comme un couteau suisse pour votre texte !
Voici un tableau des éléments de texte en ligne couramment utilisés :
| Élément | Description |
|---|---|
<mark> |
Texte surligné |
<del> |
Texte supprimé |
<s> |
Texte biffé |
<ins> |
Texte inséré |
<u> |
Texte souligné |
<small> |
Texte plus petit |
<strong> |
Texte gras |
<em> |
Texte en italique |
Exemple :
<pVous pouvez utiliser ces éléments pour <mark>surligner</mark>, <del>supprimer</del>, <s>biffer</s>, <ins>insérer</ins>, <u>souligner</u>, rendre le texte <small>plus petit</small>, <strong>gras</strong> ou <em>en italique</em>.</p>Listes
Bootstrap style les listes pour les rendre plus visuellement attractives. C'est comme donner un lifting à vos listes !
<ul>
<li>Élément de liste non ordonnée 1</li>
<li>Élément de liste non ordonnée 2</li>
</ul>
<ol>
<li>Élément de liste ordonnée 1</li>
<li>Élément de liste ordonnée 2</li>
</ol>Alignement des listes descriptives
Bootstrap vous permet d'aligner les termes et les descriptions dans les listes descriptives. C'est comme organiser un dictionnaire, mais plus stylé !
<dl class="row">
<dt class="col-sm-3">Café</dt>
<dd class="col-sm-9">Boisson chaude noire</dd>
<dt class="col-sm-3">Lait</dt>
<dd class="col-sm-9">Boisson froide blanche</dd>
</dl>Cela crée une mise en page à deux colonnes pour votre liste descriptive.
Tailles de police responsives
Bootstrap 4 a introduit les tailles de police responsives. C'est comme si votre texte faisait du yoga - il se flexe et s'adapte à différentes tailles d'écran !
Pour activer les tailles de police responsives, ajoutez cette ligne à votre CSS :
html {
font-size: 1rem;
}Ensuite, utilisez la classe .font-size-responsive sur vos éléments :
<p class="font-size-responsive">Ce texte ajustera sa taille sur différents appareils.</p>Et voilà, les amis ! Un guide complet sur la typographie Bootstrap. Souvenez-vous, la typographie est la voix de votre contenu - faites-la chanter ! Bon codage, et que vos sites web soient toujours magnifiques !
Credits: Image by storyset