Sommaire

Les en-têtes CSS POUR LE TEXTE:En-têtes

Bootstrap nous propose une mise en forme de tous les en-têtes, de <h1> à <h6>.

Voici les règles CSS utilisées pour la typographie :

h1, h2, h3, h4, h5, h6 { 
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
   font-weight: 500; 
   line-height: 1.1; 
}

Voici les règles CSS utilisées pour les tailles de caractères :

h1 { 
   font-size: 36px; 
} 
h2 { 
   font-size: 30px; 
} 
h3 { 
   font-size: 24px; 
} 
h4 { 
   font-size: 18px; 
} 
h5 { 
   font-size: 14px; 
} 
h6 { 
   font-size: 12px; 
}

Voici les règles CSS utilisées pour les marges :

h1, h2, h3 { 
   margin-top: 20px; 
   margin-bottom: 10px; 
} 
h4, h5, h6 { 
   margin-top: 10px; 
   margin-bottom: 10px; 
}

Exemple d’une page :

<h1>En-tête de niveau 1</h1> 
<h2>En-tête de niveau 2</h2> 
<h3>En-tête de niveau 3</h3> 
<h4>En-tête de niveau 4</h4> 
<h5>En-tête de niveau 5</h5> 
<h6>En-tête de niveau 6</h6>

Affichage :

images/C03-003.png

Attention, Bootstrap propose des classes nommées .h1, .h2, .h3, .h4, .h5 et .h6, qui utilisent les mêmes propriétés que les sélecteurs d’élément vus précédemment.