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 een max-widthbij elk responsief breekpunt instelt
• .container-fluid, wat width: 100%op alle breekpunten is
• .container-{breakpoint}, dat is width: 100%tot het opgegeven breekpunt

De onderstaande tabel illustreert hoe elke container zich max-widthverhoudt tot het origineel .containeren .container-fluidvoor elk breekpunt.

Bekijk ze in actie en vergelijk ze in ons Grid-voorbeeld .

Alles in een

Onze standaardklasse .containeris een responsieve container met vaste breedte, wat betekent dat de klasse max-widthop elk breekpunt verandert.

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

Vloeistof

Gebruik .container-fluidvoor 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-widths toepassen voor elk van de hogere breekpunten. Het is bijvoorbeeld .container-sm100% breed om te starten totdat het smbreekpunt 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

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.