Bootstrap Jumbotron et en-tête de page
Création d'un Jumbotron
Un jumbotron indique une grande boîte pour attirer une attention particulière sur un contenu ou une information particulière.
Un jumbotron s'affiche sous la forme d'une boîte grise aux coins arrondis. Il agrandit également les tailles de police du texte à l'intérieur.
Astuce : Dans un jumbotron, vous pouvez mettre presque n'importe quel code HTML valide, y compris d'autres éléments/classes Bootstrap.
Utilisez un <div>élément avec classe .jumbotronpour créer un jumbotron :
Tutoriel d'amorçage
Bootstrap est le framework HTML, CSS et JS le plus populaire pour développer des projets réactifs et mobiles sur le Web.
Jumbotron à l'intérieur du conteneur
Placez le jumbotron à l'intérieur <div class="container">si vous voulez que le jumbotron ne s'étende PAS jusqu'au bord de l'écran :
Exemple
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Conteneur extérieur Jumbotron
Placez le jumbotron à l'extérieur <div class="container">si vous voulez que le jumbotron s'étende jusqu'aux bords de l'écran :
Exemple
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Création d'un en-tête de page
Un en-tête de page est comme un séparateur de section.
La .page-headerclasse ajoute une ligne horizontale sous le titre (+ ajoute un espace supplémentaire autour de l'élément) :
Exemple d'en-tête de page
Utilisez un <div>élément avec classe .page-headerpour créer un en-tête de page :
Exemple
<div class="page-header">
<h1>Example Page Header</h1>
</div>