Översikt

Komponenter och alternativ för att lägga upp ditt Bootstrap-projekt, inklusive inpackning av behållare, ett kraftfullt rutsystem, ett flexibelt medieobjekt och responsiva verktygsklasser.

Behållare

Behållare är det mest grundläggande layoutelementet i Bootstrap och krävs när du använder vårt standardgridsystem . Behållare används för att innehålla, fylla och (ibland) centrera innehållet i dem. Även om behållare kan kapslas, kräver de flesta layouter inte en kapslad container.

Bootstrap kommer med tre olika behållare:

• .container, som ställer in a max-widthvid varje responsiv brytpunkt
• .container-fluid, vilket är width: 100%vid alla brytpunkter
• .container-{breakpoint}, vilket är width: 100%tills den angivna brytpunkten

Tabellen nedan illustrerar hur varje behållare max-widthjämförs med originalet .containeroch .container-fluidöver varje brytpunkt.

Se dem i aktion och jämför dem i vårt Grid-exempel .

Allt i ett

Vår standardklass .containerär en lyhörd behållare med fast bredd, vilket betyder att dess max-widthändringar vid varje brytpunkt.

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

Vätska

Använd .container-fluidför en behållare med full bredd som spänner över hela bredden av visningsporten.

<div class="container-fluid">
  ...
</div>

Mottaglig

Responsiva behållare är nya i Bootstrap v4.4. De låter dig ange en klass som är 100 % bred tills den angivna brytpunkten uppnås, varefter vi tillämpar max-widths för var och en av de högre brytpunkterna. Till exempel .container-smär 100 % bred för att starta tills smbrytpunkten nås, där den skalas upp med md, lg, och 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>

Responsiva brytpunkter

Eftersom Bootstrap är utvecklat för att vara mobilt först använder vi en handfull mediefrågor för att skapa vettiga brytpunkter för våra layouter och gränssnitt. Dessa brytpunkter är mestadels baserade på minsta visningsportbredd och låter oss skala upp element när visningsporten ändras.

Bootstrap använder i första hand följande mediafrågeintervall – eller brytpunkter – i våra Sass-källfiler för vår layout, rutsystem och komponenter.

// 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) { ... }

Eftersom vi skriver vår käll-CSS i Sass är alla våra mediefrågor tillgängliga 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;
  }
}

Vi använder ibland mediefrågor som går åt andra hållet (den givna skärmstorleken eller mindre ):

// 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

Återigen är dessa mediefrågor också tillgängliga 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;
  }
}

Det finns också mediefrågor och mixins för att rikta in sig på ett enstaka segment av skärmstorlekar med de minsta och maximala brytpunktsbredderna.

// 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) { ... }

Dessa mediefrågor är också tillgängliga 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) { ... }

På liknande sätt kan mediefrågor sträcka sig över flera brytpunktsbredder:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Sass mixin för att rikta in sig på samma skärmstorleksområde skulle vara:

@include media-breakpoint-between(md, xl) { ... }

Z-index

Flera Bootstrap-komponenter använder z-index, CSS-egenskapen som hjälper till att kontrollera layouten genom att tillhandahålla en tredje axel för att ordna innehåll. Vi använder en standard z-indexskala i Bootstrap som har utformats för korrekt lagernavigering, verktygstips och popovers, modaler och mer.

Dessa högre värden börjar på ett godtyckligt antal, tillräckligt höga och specifika för att helst undvika konflikter. Vi behöver en standarduppsättning av dessa över våra lagerkomponenter – verktygstips, popovers, navigeringsfält, rullgardinsmenyer, modaler – så att vi kan vara någorlunda konsekventa i beteendet. Det finns ingen anledning till att vi inte kunde ha använt 100+ eller 500+.

Vi uppmuntrar inte anpassning av dessa individuella värden; skulle du ändra en måste du förmodligen ändra dem alla.

$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;

För att hantera överlappande gränser inom komponenter (t.ex. knappar och ingångar i indatagrupper), använder vi låga ensiffriga z-indexvärden på 1, 2, och 3för standard, hovra och aktiva tillstånd. På hover/focus/active, tar vi ett särskilt element till förgrunden med ett högre z-indexvärde för att visa deras gräns över syskonelementen.