Iwwersiicht

Komponenten an Optiounen fir Äre Bootstrap-Projet auszeleeën, inklusiv Wrapbehälter, e mächtege Gittersystem, e flexibelen Medienobjekt a reaktiounsfäeger Utilityklassen.

Container

Container sinn dat meescht Basis Layout Element am Bootstrap a si erfuerderlech wann Dir eise Standard Gitter System benotzt . Container gi benotzt fir den Inhalt an hinnen ze enthalen, ze paddelen an (heiansdo) ze zentréieren. Wärend Container nestéiert kënne ginn, erfuerderen déi meescht Layouten keen nestéierte Container.

Bootstrap kënnt mat dräi verschiddene Container:

• .container, déi e max-widthbei all reaktiounsfäeger Breakpoint setzt
• .container-fluid, déi width: 100%op all breakpoints ass
• .container-{breakpoint}, wat width: 100%bis zum spezifizéierte Breakpunkt ass

D'Tabell hei ënnen illustréiert wéi all Container max-widthmat dem Original .containeran .container-fluidiwwer all Breakpunkt vergläicht.

Kuckt se an Aktioun a vergläicht se an eisem Grid Beispill .

Alles an engem

Eis Standardklass .containerass e reaktiounsfäeger, fixer Breet Container, dat heescht seng max-widthÄnnerungen op all Breakpoint.

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

Flëssegkeet

Benotzt .container-fluidfir eng voll Breet Container, Spannung der ganzer Breet vun der viewport.

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

Reaktiounsfäeger

Responsive Container sinn nei am Bootstrap v4.4. Si erlaben Iech eng Klass ze spezifizéieren déi 100% breet ass bis de spezifizéierte Breakpunkt erreecht ass, duerno gëlle mir max-widths fir jiddereng vun den héije Breakpunkten. Zum Beispill .container-smass 100% breet fir unzefänken bis de smBreakpunkt erreecht gëtt, wou et mat md, lg, an 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>

Reaktiounsfäeger Breakpoints

Zënter Bootstrap ass entwéckelt fir als éischt mobil ze sinn, benotze mir eng Handvoll Medienufroen fir sënnvoll Breakpunkte fir eis Layouten an Interfaces ze kreéieren. Dës Breakpunkte baséieren meeschtens op Minimum Viewport Breeten an erlaben eis Elementer opzebauen wéi de Viewport ännert.

Bootstrap benotzt haaptsächlech déi folgend Medien Query Rangen - oder Breakpoints - an eise Quell Sass Dateien fir eise Layout, Gittersystem a 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) { ... }

Well mir eis Quell-CSS zu Sass schreiwen, sinn all eis Medienufroen iwwer 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;
  }
}

Mir benotzen heiansdo Medienufroen déi an déi aner Richtung goen (déi gegebene Bildschirmgréisst oder méi kleng ):

// 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

Nach eng Kéier sinn dës Medienufroen och iwwer 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;
  }
}

Et ginn och Medienufroen a Mixins fir en eenzege Segment vun Écrangréissten ze zielen mat de Minimum a maximal Breakpoint Breet.

// 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) { ... }

Dës Medienufroe sinn och iwwer 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) { ... }

Ähnlech kënne Medienufroe verschidde Breakpunktbreeten spanen:

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

De Sass Mixin fir datselwecht Bildschirmgréisstberäich ze zielen wier:

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

Z-index

Verschidde Bootstrap Komponenten benotzen z-index, d'CSS Eegeschafte déi hëlleft de Layout ze kontrolléieren andeems se eng drëtt Achs ubidden fir Inhalt ze arrangéieren. Mir benotzen eng Standard Z-Index Skala am Bootstrap déi entwéckelt ass fir richteg Layer Navigatioun, Tooltips a Popovers, Modalen, a méi.

Dës méi héich Wäerter fänken un enger arbiträrer Zuel un, héich a spezifesch genuch fir ideal Konflikter ze vermeiden. Mir brauchen e Standard-Set vun dësen iwwer eis Layer-Komponenten - Tooltips, Popovers, Navbars, Dropdowns, Modals - sou datt mir raisonnabel konsequent an de Verhalen kënne sinn. Et gëtt kee Grond datt mir 100+ oder 500+ net benotze kënnen.

Mir encouragéieren keng Personnalisatioun vun dësen individuellen Wäerter; sollt Dir een änneren, Dir musst wahrscheinlech se all änneren.

$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;

Fir iwwerlappend Grenzen bannent Komponenten ze handhaben (zB Knäppercher an Inputen an Inputgruppen), benotze mir niddereg Eenzifferwäerter z-indexvun 1, 2, a 3fir Standard-, Hover- an aktive Staaten. Op Hover / Focus / Active brénge mir e bestëmmten Element op d'Spëtzt mat engem méi héije z-indexWäert fir hir Grenz iwwer d'Geschwësterelementer ze weisen.