Bootstrap Jumbotron und Seitenkopfzeile
Erstellen eines Jumbotrons
Ein Jumbotron bezeichnet ein großes Kästchen, um besondere Aufmerksamkeit auf bestimmte Inhalte oder Informationen zu lenken.
Ein Jumbotron wird als graues Kästchen mit abgerundeten Ecken dargestellt. Es vergrößert auch die Schriftgröße des darin enthaltenen Textes.
Tipp: In einem Jumbotron können Sie fast jeden gültigen HTML-Code einfügen, einschließlich anderer Bootstrap-Elemente/Klassen.
Verwenden Sie ein <div>Element mit Klasse .jumbotron, um ein Jumbotron zu erstellen:
Bootstrap-Tutorial
Bootstrap ist das beliebteste HTML-, CSS- und JS-Framework für die Entwicklung responsiver, Mobile-First-Projekte im Web.
Jumbotron im Container
Platzieren Sie das Jumbotron im <div class="container">wenn Sie möchten, dass das Jumbotron NICHT bis zum Rand des Bildschirms reicht:
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>
Jumbotron Außencontainer
Platzieren Sie den Jumbotron außerhalb des <div class="container">, wenn Sie möchten, dass der Jumbotron bis zu den Bildschirmrändern reicht:
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>
Erstellen einer Seitenkopfzeile
Ein Seitenkopf ist wie ein Abschnittsteiler.
Die .page-headerKlasse fügt eine horizontale Linie unter der Überschrift hinzu (+ fügt etwas zusätzlichen Platz um das Element hinzu):
Kopfzeile einer Beispielseite
Verwenden Sie ein <div>Element mit Klasse .page-header, um einen Seitenkopf zu erstellen:
Beispiel
<div class="page-header">
<h1>Example Page Header</h1>
</div>