Erstellen eines Jumbotron
Ein jumbotron zeigt eine große Kiste für zusätzliche Aufmerksamkeit auf einige spezielle Inhalte oder Informationen aufrufen.
Ein jumbotron wird als grauer Kasten mit abgerundeten Ecken angezeigt. Es vergrößert auch die Schriftgrößen des Textes in seinem Inneren.
Tipp: Innerhalb eines jumbotron können Sie fast jede gültige HTML setzen, einschließlich anderer Bootstrap Elemente / Klassen.
Verwenden Sie ein <div> Element mit Klasse .jumbotron eine jumbotron zu erstellen:
Bootstrap Tutorial
Bootstrap ist die beliebteste HTML, CSS und JS Framework für die Entwicklung anspricht, Mobil ersten Projekte im Internet.
Jumbotron Innenbehälter
Legen Sie die jumbotron innerhalb des <div class="container"> , wenn Sie die jumbotron wollen an den Rand des Bildschirms nicht verlängern:
Beispiel
<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>
Versuch es selber " Jumbotron Außerhalb Container
Legen Sie die jumbotron außerhalb des <div class="container"> , wenn Sie wollen , dass die jumbotron an die Bildschirmränder zu verlängern:
Beispiel
<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>
Versuch es selber " Erstellen eines Seitenkopf
Ein Seitenkopf ist wie ein Abschnitt Teiler.
Die .page-header - Klasse fügt eine horizontale Linie unter der Überschrift (+ fügt etwas mehr Platz um das Element):
Beispiel Seitenkopf
Verwenden Sie ein <div> Element mit Klasse .page-header einen Seitenkopf zu erstellen: