Sommaire

Les en-têtes de page COMPOSANTS WEB:En-têtes

1. L’objectif

Il est assez usuel d’utiliser un élément <h1> dans les en-têtes de page pour indiquer le nom du site. De la même manière qu’il est très courant d’avoir un slogan juste sous le titre du site. Bootstrap nous propose une mise en page et une mise en forme sobre et efficace.

Avec ce composant Bootstrap, le slogan est placé dans un élément <small>, dans le <h1> du titre. Ces deux éléments sont placés dans une boîte <div class="page-header">.

Vous pouvez consulter le fichier Bootstrap-04-COMP-Web/02_header.html.

2. La structure

Voici le code HTML utilisé :

<div class="container"> 
   <div class="row"> 
      <div class="page-header"> 
        <h1>Mon super site Web <small>Mon site à moi et pour vous 
</small></h1> 
      </div> 
   </div> 
</div>

Voici l’affichage de cet en-tête :

images/C10-002.png

3. Les règles CSS

Voici les sélecteurs CSS utilisés dans cette mise en page :

.page-header { 
   padding-bottom: 9px; 
   margin: 40px 0 20px; 
   border-bottom: 1px solid #eee; 
} 
h1, .h1 { 
   font-size: 36px; 
} 
h1, h2, h3 { 
   margin-top: 20px; 
   margin-bottom: 10px; 
}  ...