• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Ajoutez des éléments typographiques à votre page

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bien qu'il y ait eu une augmentation massive de l'utilisation d'autres types de support, le texte représente encore une place primordiale du contenu du web. Il est donc important de savoir l'afficher et le formater sur vos pages web.

Créez des titres

Bootstrap 4 comprend des styles pour tous les titres HTML de <h1>  jusqu'à  <h6>. Pour appliquer le style de titre, vous devez simplement utiliser la balise   <h*>  pertinente. Vous avez également la possibilité d'ajouter la classe   .h1  à  .h6  pour d'autres balises telles que  <p>, si vous ne pouvez pas utiliser les éléments  <h*>.

Entraînez-vous

Console de code
Houston... ?
Il semblerait que votre ordinateur ne soit pas connecté à Internet.
Vous n'êtes pas connecté

Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.

Pensez à vous entraîner avant de terminer ce chapitre.

Vous avez déjà observé l'utilisation des balises de titres dans les cartes et sur la page Cours (lessons.html). Elles seront également utilisées à la page Détails du cours (lesson-1.html), sur laquelle nous commencerons à travailler dans la section suivante.

Ajoutez des listes

Bootstrap applique également des styles aux balises de listes HTML  <ul>  et  <ol>. Vous obtenez ainsi des listes stylisées et prêtes à l'emploi. Vous pouvez d’autre part supprimer les styles de la liste en ajoutant la classe  .list-unstyled.

Enfin, il est possible de créer une liste  inline  en ajoutant une classe .list-inline à la balise   <ul>  et la classe .list-inline-item  aux  <li> enfants :

<ul class=”list-inline”>
<li class=”list-inline-item”>Je</li>
<li class=”list-inline-item”>suis</li>
<li class=”list-inline-item”>une liste</li>
<li class=”list-inline-item”>inline</li>
</ul>

Formatez les éléments de votre page

Alignez le texte

Dans Bootstrap, vous pouvez modifier l'alignement du texte dans un élément en ajoutant l'une des classes d'alignement de texte.

Les classes sont explicites :

Classe

Description

.text-left

Aligner le texte à gauche dans un élément

.text-center

Aligner le texte au centre dans un élément

.text-right

Aligner le texte à droite dans un élément

L'alignement du texte dans Bootstrap comporte également des classes qui peuvent ajuster l'alignement en fonction de la taille de la zone de visualisation, en utilisant les modificateurs de classes comme système de grille.

Exemples d'alignement réactif :

Classe

Description

.text-sm-left

Aligner le texte à gauche sur toutes les petites zones de visualisation (sm) ou plus grandes

.text-md-center

Aligner le texte au centre sur toutes les zones de visualisation moyennes (md) ou plus grandes

.text-lg-right

Aligner le texte à droite sur toutes les grandes zones de visualisation (lg) ou plus grandes

.text-xl-center

Aligner le texte au centre sur toutes les zones de visualisation très grandes (xl)

Les classes ci-dessus sont uniquement des exemples de combinaisons disponibles avec Bootstrap. Vous pouvez combiner de cette façon n'importe lequel des quatre modificateurs de classes (-sm,  -md,   -lg  et  -xl) avec l'une des classes d'alignement de texte (.left,   .center  et   .right).

Pour réaliser l'alignement responsive qui change avec la taille de la zone de visualisation, vous pouvez combiner des classes d'alignement dans un élément.

Par exemple, si vous voulez aligner au centre le contenu du texte d'un élément sur des zones de visualisation très petites, jusqu'à des zones de visualisation grandes, puis l'aligner à gauche sur des zones de visualisation grandes ou plus larges, vous utilisez les modificateurs de classe suivants :

<p class=”text-center text-lg-left>
[L’alignement du contenu dépend de la zone de visualisation]
</p>

Gérez l’épaisseur de la police

Avec Bootstrap, il est possible de modifier le formatage de tout élément de texte en ajoutant la classe   .font-weight-*  pertinente. Voici les classes disponibles et leur effet sur l'épaisseur de la police :

Classe

Effet

font-weight-bold

Texte en gras

Bolder weight text

Texte d'épaisseur plus grasse (relatif à l'élément parent)

font-weight-normal

Texte d'épaisseur normale

font-weight-light

Texte d'épaisseur légère

font-weight-lighter

Texte d'épaisseur plus légère (relatif à l'élément parent)

C'est plutôt simple, n'est-ce pas ?

Vous pouvez également passer le format de texte d'un élément en italique en ajoutant la classe  .font-italic, comme indiqué dans cet exemple de code :

<p>
[Parfois, vous aurez envie de mettre <span class="font-italic">des mots en italique</span> dans votre contenu !]
</p>

Il est temps de rassembler ce que vous avez appris dans ce chapitre pour créer la section de pied de page du site.  Pour rappel, voilà à quoi ressemble la section de pied de page :

Pied de page
Pied de page

Vous pouvez utiliser une liste inline centrée pour le contenu du pied de page. Appliquez ce que vous avez appris pour utiliser l'une des classes de couleur d'arrière-plan de Bootstrap. Enfin, utilisez la même structure HTML que la section d'en-tête pour que l'arrière-plan du pied de page recouvre la largeur de la page, tout en conservant son contenu à l'intérieur d'un div   .container.

En cas de besoin, vérifiez votre travail dans le dossier partie-3/chapitre-2/footer du dépôt GitHub du cours.

En résumé  

  • Vous pouvez implémenter le texte de titre à l'aide des balises de titre (telles que <h1> et <h2>;) ou en ajoutant une classe de titre à d'autres balises (telle que la classe Bootstrap .h3).

  • Il est possible de créer des listes inline qui permettent d’aligner le pied de page de notre site web Info School.

  • Il est possible d'utiliser des classes Bootstrap pour le formatage et l'alignement du texte directement au sein des balises HTML du code.

Maintenant que vous avez appris à utiliser les classes de typographie de Bootstrap pour formater le texte du site, vous êtes prêt à optimiser les pages à l'aide de supports visuels, tels que des images et des vidéos.

Exemple de certificat de réussite
Exemple de certificat de réussite