Typographie – Titres et paragraphes

En HTML, on utilise la balise <p> pour insérer un paragraphe et la balise <hx> pour insérer un titre.

Les titres – de h1 à h6

Les balises de <h1> à <h6> désignent les titres, Bootstrap 3 est livré avec un préformatage un peu particulier:

Balise Taille Padding-top Padding-bottom
h1 36 px 20 px 10 px
h2 30 px 20 px 10 px
h3 24 px 20 px 10 px
h4 18 px 10 px 10 px
h5 14 px 10 px 10 px
h6 12 px 10 px 10 px

Pour créer des titres dans Bootstrap 3, rien de plus simple :

Le code ci-dessus donne le résultat suivant :

Titres préformatés de Bootstrap 3

Exemples des titres – Bootstrap 3

Les paragraphes

Pour insérer un paragraphe dans votre page, utilisez la balise <p> : <p>...Votre paragraphe...</p>

Comment aligner des paragraphes avec Bootstrap 3

Bootstrap 3 vous permet d’organiser facilement vos paragraphes: aligner à gauche, aligner à droite ou au centre.

– Pour aligner le texte à gauche, nous utilisons la classe .text-left.
– Pour aligner le texte à gauche, nous utilisons la classe .text-right.
– Et pour center le texte, nous utilisons la classe .text-center.

Alignement du texte dans Bootstrap 3

Exemple d’alignement du texte – Bootstrap 3

Mettre en valeur une partie du texte avec Bootstrap 3

Pour mettre en valeur un paragraphe de votre page, Bootstrap 3 met à votre disposition un certain nombre d’outils : les citations – la classe lead – les wells

a – Les citations :

Pour inserer une citation dans votre page, il suffit d’utiliser la balise <blockquote>. avec Bootstrap 3, vous pouvez utiliser la balise comme suit :

La balise  <blockquote> indique le début de la citation et la balise <small> pour indiquer sa/ses référence(s).

Exemple d'une citation - Bootstrap 3

Exemple d’une citation – Bootstrap 3

b – Les wells

Les wells permettent d’insérer du texte ou tout autre contenu HTML (listes, liens, …) dans une boite. celle-ci a un arrière plan gris et des bordures aux coins arrondis.

Pour créer un weel, ajoutez la classe .well dans une section <div> comme suit :<div class="well">. Par défaut, les wells ont un padding de 19px et pour modifier le padding par defaut, utilisez les sous-classes .well-lg et .well-sl:

Classe Padding
.well 19 px (padding par défaut)
.well .well-sm 9 px
.well .well-lg 24 px

Exemple d’utilisation des Wells:

Ce qui donne le résultat suivant :

Exemple des wells - Bootstrap 3

Exemple d’un well – Bootstrap 3

c – La classe lead

Dans le cas où vous voudrez ajouter un résumé à la tête d’un long texte, Bootstrap 3 met à votre disposition la classe .lead pour différencier ce résumé et le texte entier de votre page.

Ce qui donnera l’aspect visuel suivant :

Exemple de la classe lead - bootstrap 3

Exemple de la classe lead – bootstrap 3

Cette partie du cours intitulée: Typographie – Titres et paragraphes dans Bootstrap 3 Vous a permet de mettre en pratique les titres et les paragraphes dans Bootstrap 3 et aussi la découverte des éléments de mis en valeur du texte à l’instar des citation et Wells.

Laisser un commentaire