Bootstrap Jumbotron
In diesem Kapitel wird eine weitere von Bootstrap unterstützte Funktion erläutert: das Jumbotron. Wie der Name schon sagt, kann diese Komponente die Größe von Überschriften vergrößern und dem Inhalt der Landingpage mehr Abstand hinzufügen. Die Schritte zur Verwendung des Jumbotrons sind wie folgt:
- Erstellen Sie einen Container mit der Klasse.jumbotron. container <div>.
- Zusätzlich zum größeren <h1> wird die Schriftstärkefont-weightauf 200 reduziert.
Das folgende Beispiel demonstriert dies:
Beispiel
<div class="container">
<div class="jumbotron">
<h1>Willkommen auf der Landingpage!</h1>
<p>Dies ist ein Beispiel für ein Jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Mehr erfahren</a>
</p>
</div>
</div>
Ausprobieren »
Das Ergebnis ist wie folgt:
Um ein Jumbotron über die volle Breite ohne abgerundete Ecken zu erhalten, verwenden Sie die Klasse.containeraußerhalb aller.jumbotronKlassen, wie im folgenden Beispiel gezeigt:
Beispiel
<div class="jumbotron">
<div class="container">
<h1>Willkommen auf der Landingpage!</h1>
<p>Dies ist ein Beispiel für ein Jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Mehr erfahren</a>
</p>
</div>
</div>
Ausprobieren »
Das Ergebnis ist wie folgt:
