Überblick

Komponenten und Optionen für das Layout Ihres Bootstrap-Projekts, einschließlich Wrapping-Containern, einem leistungsstarken Grid-System, einem flexiblen Medienobjekt und responsiven Hilfsklassen.

Behälter

Container sind das grundlegendste Layoutelement in Bootstrap und werden benötigt, wenn Sie unser Standardrastersystem verwenden . Container werden verwendet, um den Inhalt darin aufzunehmen, aufzufüllen und (manchmal) zu zentrieren. Während Container verschachtelt werden können , erfordern die meisten Layouts keinen verschachtelten Container.

Bootstrap wird mit drei verschiedenen Containern geliefert:

• .container, wodurch max-widthan jedem reaktionsfähigen Haltepunkt ein festgelegt wird
• .container-fluid, was width: 100%an allen Haltepunkten ist
• .container-{breakpoint}, also width: 100%bis zum angegebenen Haltepunkt

Die folgende Tabelle veranschaulicht, wie die einzelnen Container im max-widthVergleich zum Original .containerund .container-fluidüber jeden Haltepunkt hinweg abschneiden.

Sehen Sie sie in Aktion und vergleichen Sie sie in unserem Grid-Beispiel .

Alles in einem

Unsere Standardklasse .containerist ein reaktionsschneller Container mit fester Breite, d. h. seine max-widthÄnderungen an jedem Haltepunkt.

<div class="container">
  <!-- Content here -->
</div>

Fluid

Verwenden Sie dies .container-fluidfür einen Container in voller Breite, der sich über die gesamte Breite des Ansichtsfensters erstreckt.

<div class="container-fluid">
  ...
</div>

Reaktionsschnell

Responsive Container sind neu in Bootstrap v4.4. Sie ermöglichen es Ihnen, eine Klasse anzugeben, die 100 % breit ist, bis der angegebene Haltepunkt erreicht ist, wonach wir max-widths für jeden der höheren Haltepunkte anwenden. Zum Beispiel .container-smist 100 % breit, um zu beginnen, bis der smHaltepunkt erreicht ist, wo es mit md, lg, und skaliert wird xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Responsive Breakpoints

Da Bootstrap entwickelt wurde, um zuerst mobil zu sein, verwenden wir eine Handvoll Medienabfragen , um sinnvolle Haltepunkte für unsere Layouts und Schnittstellen zu erstellen. Diese Haltepunkte basieren hauptsächlich auf minimalen Ansichtsfensterbreiten und ermöglichen es uns, Elemente zu vergrößern, wenn sich das Ansichtsfenster ändert.

Bootstrap verwendet hauptsächlich die folgenden Medienabfragebereiche – oder Haltepunkte – in unseren Sass-Quelldateien für unser Layout, unser Rastersystem und unsere Komponenten.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Da wir unser Quell-CSS in Sass schreiben, sind alle unsere Medienabfragen über Sass-Mixins verfügbar:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Wir verwenden gelegentlich Medienabfragen, die in die andere Richtung gehen (die angegebene Bildschirmgröße oder kleiner ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Auch diese Medienabfragen sind wieder über Sass-Mixins verfügbar:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Es gibt auch Medienabfragen und Mixins zum Targeting eines einzelnen Segments von Bildschirmgrößen unter Verwendung der minimalen und maximalen Haltepunktbreite.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Diese Medienabfragen sind auch über Sass-Mixins verfügbar:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Ebenso können Medienabfragen mehrere Haltepunktbreiten umfassen:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Das Sass-Mixin für die Ausrichtung auf denselben Bildschirmgrößenbereich wäre:

@include media-breakpoint-between(md, xl) { ... }

Z-Index

Mehrere Bootstrap-Komponenten verwenden z-index, die CSS-Eigenschaft, die bei der Steuerung des Layouts hilft, indem sie eine dritte Achse zum Anordnen von Inhalten bereitstellt. Wir verwenden eine Standard-Z-Index-Skala in Bootstrap, die entwickelt wurde, um Navigation, Tooltips und Popovers, Modals und mehr richtig zu schichten.

Diese höheren Werte beginnen bei einer beliebigen Zahl, die hoch und spezifisch genug ist, um Konflikte idealerweise zu vermeiden. Wir brauchen einen Standardsatz davon für unsere mehrschichtigen Komponenten – Tooltips, Popovers, Navigationsleisten, Dropdowns, Modals – damit wir in den Verhaltensweisen einigermaßen konsistent sein können. 100Es gibt keinen Grund, warum wir + oder + nicht hätten verwenden können 500.

Wir ermutigen nicht zur Anpassung dieser individuellen Werte; Sollten Sie einen ändern, müssen Sie wahrscheinlich alle ändern.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Um überlappende Grenzen innerhalb von Komponenten (z. B. Schaltflächen und Eingaben in Eingabegruppen) zu handhaben, verwenden wir niedrige einstellige z-indexWerte von 1, 2und 3für Standard-, Hover- und aktive Zustände. Bei Hover/Focus/Active bringen wir ein bestimmtes Element mit einem höheren z-indexWert in den Vordergrund, um seine Grenze zu den Geschwisterelementen anzuzeigen.