Overzicht
Componenten en opties voor het opmaken van uw Bootstrap-project, inclusief verpakkingscontainers, een krachtig rastersysteem, een flexibel media-object en responsieve hulpprogrammaklassen.
containers
Containers zijn het meest elementaire lay-outelement in Bootstrap en zijn vereist bij gebruik van ons standaardrastersysteem . Containers worden gebruikt om de inhoud erin te bevatten, op te vullen en (soms) te centreren. Hoewel containers genest kunnen worden, hebben de meeste lay-outs geen geneste container nodig.
Bootstrap wordt geleverd met drie verschillende containers:
.container
, die eenmax-width
bij elk responsief breekpunt instelt.container-fluid
, watwidth: 100%
op alle breekpunten is.container-{breakpoint}
, dat iswidth: 100%
tot het opgegeven breekpunt
De onderstaande tabel illustreert hoe elke container zich max-width
verhoudt tot het origineel .container
en .container-fluid
voor elk breekpunt.
Bekijk ze in actie en vergelijk ze in ons Grid-voorbeeld .
Extra klein <576px |
Klein ≥576px |
Gemiddeld ≥768px |
Groot (992px) |
Extra groot (1200px) |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.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 |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Alles in een
Onze standaardklasse .container
is een responsieve container met vaste breedte, wat betekent dat de klasse max-width
op elk breekpunt verandert.
<div class="container">
<!-- Content here -->
</div>
Vloeistof
Gebruik .container-fluid
voor een container over de volledige breedte, die de volledige breedte van de viewport beslaat.
<div class="container-fluid">
...
</div>
Snel reagerend
Responsieve containers zijn nieuw in Bootstrap v4.4. Hiermee kunt u een klasse specificeren die 100% breed is totdat het opgegeven breekpunt is bereikt, waarna we max-width
s toepassen voor elk van de hogere breekpunten. Het is bijvoorbeeld .container-sm
100% breed om te starten totdat het sm
breekpunt is bereikt, waar het wordt opgeschaald met md
, lg
, en 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>
Responsieve onderbrekingspunten
Omdat Bootstrap is ontwikkeld om eerst mobiel te zijn, gebruiken we een handvol mediaquery's om verstandige breekpunten te creëren voor onze lay-outs en interfaces. Deze breekpunten zijn meestal gebaseerd op minimale viewport-breedtes en stellen ons in staat om elementen op te schalen als de viewport verandert.
Bootstrap gebruikt voornamelijk de volgende mediaquerybereiken (of breekpunten) in onze Sass-bronbestanden voor onze lay-out, rastersysteem en componenten.
// 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) { ... }
Omdat we onze bron-CSS in Sass schrijven, zijn al onze mediaquery's beschikbaar via Sass-mixins:
// 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;
}
}
We gebruiken af en toe mediaquery's die in de andere richting gaan (de gegeven schermgrootte of 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
min-
en max-
voorvoegsels en viewports met fractionele breedten omzeilen (die onder bepaalde omstandigheden kunnen voorkomen op apparaten met een hoge dpi, bijvoorbeeld) door waarden met een hogere precisie te gebruiken voor deze vergelijkingen .
Nogmaals, deze mediaquery's zijn ook beschikbaar via Sass-mixins:
@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;
}
}
Er zijn ook mediaquery's en mixins voor het targeten van een enkel segment van schermformaten met behulp van de minimale en maximale breekpuntbreedten.
// 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) { ... }
Deze mediaquery's zijn ook beschikbaar via Sass-mixins:
@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) { ... }
Evenzo kunnen mediaquery's meerdere breekpuntbreedten omvatten:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
De Sass-mix voor het targeten van hetzelfde schermgroottebereik zou zijn:
@include media-breakpoint-between(md, xl) { ... }
Z-index
Verschillende Bootstrap-componenten gebruiken z-index
, de CSS-eigenschap die de lay-out helpt regelen door een derde as te bieden om inhoud te rangschikken. We gebruiken een standaard z-indexschaal in Bootstrap die is ontworpen om navigatie, tooltips en popovers, modals en meer op de juiste manier te lagen.
Deze hogere waarden beginnen bij een willekeurig getal, hoog en specifiek genoeg om conflicten idealiter te vermijden. We hebben een standaardset hiervan nodig voor onze gelaagde componenten - tooltips, popovers, navigatiebalken, vervolgkeuzelijsten, modals - zodat we redelijk consistent kunnen zijn in het gedrag. Er is geen reden waarom we 100
+ of 500
+ niet hadden kunnen gebruiken.
We moedigen aanpassing van deze individuele waarden niet aan; als je er een verandert, moet je ze waarschijnlijk allemaal veranderen.
$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;
Om overlappende randen binnen componenten (bijv. knoppen en invoer in invoergroepen) af te handelen, gebruiken we lage eencijferige z-index
waarden van 1
, 2
, en 3
voor standaard-, zweef- en actieve statussen. Bij hover/focus/active brengen we een bepaald element naar de voorgrond met een hogere z-index
waarde om hun grens over de zusterelementen te laten zien.