Création d'un Jumbotron
A jumbotron indique une grande boîte pour appeler une attention particulière à certains contenus ou des informations spéciales.
Un jumbotron est affiché comme une boîte grise avec des coins arrondis. Il élargit également les tailles de police du texte à l'intérieur.
Astuce: A l' intérieur d' un jumbotron vous pouvez mettre presque tous HTML valide, y compris d' autres Bootstrap éléments / classes.
Utilisez un <div> élément avec la classe .jumbotron pour créer un jumbotron:
Bootstrap Tutorial
Bootstrap est le HTML, CSS et JS cadre le plus populaire pour le développement sensible, mobile premiers projets sur le web.
Jumbotron Inside Container
Placez le jumbotron dans le <div class="container"> si vous voulez que le jumbotron de NE PAS étendre 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>
Essayez - le vous - même » Jumbotron extérieur Conteneur
Placez le jumbotron en dehors de la <div class="container"> si vous voulez que le jumbotron d'étendre 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>
Essayez - le vous - même » Création d'une tête de page
Une tête de page est comme un séparateur de section.
Le .page-header de classe ajoute une ligne horizontale sous le titre (+ ajoute un peu d' espace supplémentaire autour de l'élément):
Exemple En-tête
Utilisez un <div> élément avec classe .page-header pour créer un en- tête de page: