Source

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 . Kies uit een responsieve container met vaste breedte (wat betekent dat de container max-widthbij elk breekpunt verandert) of vloeiende breedte (wat betekent dat hij 100%altijd breed is).

Hoewel containers genest kunnen worden, hebben de meeste lay-outs geen geneste container nodig.

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

Gebruik .container-fluidvoor een container over de volledige breedte, die de volledige breedte van de viewport beslaat.

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

Houd er rekening mee dat aangezien browsers momenteel geen bereikcontextquery's ondersteunen , we de beperkingen van 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-indexwaarden van 1, 2, en 3voor standaard-, zweef- en actieve statussen. Bij hover/focus/active brengen we een bepaald element naar de voorgrond met een hogere z-indexwaarde om hun grens over de zusterelementen te laten zien.