Bootstrap 4 Container
Behälter
Sie haben aus dem vorherigen Kapitel gelernt, dass Bootstrap ein enthaltendes Element benötigt, um Website-Inhalte einzuschließen.
Container werden verwendet, um den darin enthaltenen Inhalt aufzufüllen, und es stehen zwei Containerklassen zur Verfügung:
- Die
.containerKlasse stellt einen ansprechenden Container mit fester Breite bereit - Die
.container-fluidKlasse stellt einen Container voller Breite bereit , der sich über die gesamte Breite des Darstellungsbereichs erstreckt
Fester Behälter
Verwenden Sie die .containerKlasse, um einen responsiven Container mit fester Breite zu erstellen.
Beachten Sie, dass sich seine Breite ( max-width) bei unterschiedlichen Bildschirmgrößen ändert:
|
Extraklein <576px |
Klein ≥576px |
Mittel ≥768px |
Groß ≥992px |
Extra groß ≥1200px |
|
|---|---|---|---|---|---|
| maximale Breite | 100% | 540px | 720px | 960px | 1140px |
Öffnen Sie das folgende Beispiel und ändern Sie die Größe des Browserfensters, um zu sehen, dass sich die Containerbreite an verschiedenen Haltepunkten ändert:
Beispiel
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Flüssigkeitsbehälter
Verwenden Sie die .container-fluidKlasse, um einen Container in voller Breite zu erstellen, der sich immer über die gesamte Breite des Bildschirms erstreckt ( widthist immer 100%):
Beispiel
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Behälterpolsterung
Container haben standardmäßig eine linke und rechte Auffüllung von 15 Pixel, ohne obere oder untere Auffüllung. Daher verwenden wir häufig Abstandshilfsmittel wie zusätzliche Polsterung und Ränder, damit sie noch besser aussehen. Zum Beispiel .pt-3bedeutet "Fügen Sie eine obere Polsterung von 16px hinzu":
Beispiel
<div class="container pt-3"></div>
In unserem Kapitel BS4-Dienstprogramme erfahren Sie viel mehr über Spacing -Utilities .
Containerrand und -farbe
Andere Dienstprogramme wie Rahmen und Farben werden ebenfalls häufig zusammen mit Containern verwendet:
Beispiel
Meine erste Bootstrap-Seite
Dieser Behälter hat einen Rand und einige zusätzliche Polsterungen und Ränder.
Meine erste Bootstrap-Seite
Dieser Container hat eine dunkle Hintergrundfarbe und einen weißen Text sowie einige zusätzliche Füllungen und Ränder.
Meine erste Bootstrap-Seite
Dieser Container hat eine blaue Hintergrundfarbe und einen weißen Text sowie einige zusätzliche Auffüllungen und Ränder.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
In unserem BS4-Farben-Kapitel und BS4-Dienstprogramme-Kapitel erfahren Sie viel mehr über Farben und Rahmenhilfsmittel .
Responsive Container
Sie können die .container-sm|md|lg|xlKlassen auch verwenden, um responsive Container zu erstellen.
Die max-widthdes Containers ändert sich auf verschiedenen Bildschirmgrößen/Ansichtsfenstern:
| Klasse |
Extraklein <576px |
Klein ≥576px |
Mittel ≥768px |
Groß ≥992px |
Extra groß ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
Beispiel
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
Wussten Sie?
W3.CSS ist eine hervorragende Alternative zu Bootstrap 4.
W3.CSS ist kleiner, schneller und benutzerfreundlicher.
Wenn Sie W3.CSS lernen möchten, besuchen Sie unser W3.CSS-Tutorial .