Sommaire

Les lancements COMPOSANTS WEB:Lancements

1. L’objectif

Bootstrap nous propose une mise en page nommée Jumbotron qui permet de mettre en avant un événement important dans votre site, comme par exemple un lancement d’un nouveau service, une nouvelle version d’un produit... Cette mise en page est adaptative selon la taille de l’écran de diffusion, avec l’utilisation des requêtes de média.

Utilisez le fichier Bootstrap-04-COMP-Web/01_jumbotron.html pour visualiser l’exemple.

2. La structure

Dans des boîtes <div> (ou tout autre élément de structure), utilisez les classes .container, .row et .jumbotron.

Voici un exemple simple :

<div class="container"> 
   <div class="row"> 
      <div class="jumbotron"> 
         <h1>Bienvenue</h1> 
         <p>Voici la nouvelle version de mon site</p> 
         <p><a class="btn btn-primary btn-lg">Entrez !</a></p> 
      </div> 
   </div> 
</div>

Voici l’affichage de cette mise en page :

images/C10-001.png

3. Les règles CSS Jumbotron

Voici les sélecteurs CSS de Bootstrap qui interviennent pour la classe .jumbotron :

@media screen and (min-width: 768px) 
   .jumbotron { 
      padding-top: 48px; 
      padding-bottom: 48px; 
} 
.jumbotron ...