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 . Wielt aus engem reaktiounsfäeger Container mat fixer Breet (dat heescht seng max-widthÄnnerunge bei all Breakpunkt) oder Flëssegkeetsbreet (dat heescht datt et déi 100%ganzen Zäit breet ass).

Wärend Container nestéiert kënne ginn, erfuerderen déi meescht Layouten keen nestéierte Container.

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

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

<div class="container-fluid">
  ...
</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 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:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

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 konnten benotzen.

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.