Iwwersiicht
Komponenten an Optiounen fir Äre Bootstrap-Projet auszeleeën, dorënner Wrapbehälter, e mächtege Gittersystem, e flexibelen Medienobjekt, a reaktiounsfäeger Utility-Klassen.
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 emax-width
bei all reaktiounsfäeger Breakpoint setzt.container-fluid
, déiwidth: 100%
op all breakpoints ass.container-{breakpoint}
, watwidth: 100%
bis zum spezifizéierte Breakpunkt ass
D'Tabell hei ënnen illustréiert wéi all Container max-width
mat dem Original .container
an .container-fluid
iwwer all Breakpunkt vergläicht.
Kuckt se an Aktioun a vergläicht se an eisem Grid Beispill .
Extra kleng <576px |
Kleng ≥576px |
Mëttelméisseg ≥768px |
Grouss ≥992px |
Extra grouss ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 9 60px | 1140px |
.container-sm |
100% | 540px | 720px | 9 60px | 1140px |
.container-md |
100% | 100% | 720px | 9 60px | 1140px |
.container-lg |
100% | 100% | 100% | 9 60px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Alles an engem
Eis Standardklass .container
ass 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-fluid
fir 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-width
s fir jiddereng vun den héije Breakpunkten. Zum Beispill .container-sm
ass 100% breet fir unzefänken bis de sm
Breakpunkt 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
min-
a max-
Präfixe a Viewporte mat fraktiounsbreeten (wat ënner bestëmmte Bedéngungen op High-dpi Apparater zum Beispill ka geschéien) andeems mir Wäerter mat méi héijer Präzisioun fir dës Vergläicher benotzen .
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 Behuelen 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 eenzel Zifferwäerter z-index
vun 1
, 2
, a 3
fir 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-index
Wäert fir hir Grenz iwwer d'Geschwësterelementer ze weisen.