Source

Ö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 . Välj mellan en lyhörd behållare med fast bredd (vilket betyder att den max-widthändras vid varje brytpunkt) eller vätskebredd (vilket betyder att den är 100%bred hela tiden).

Även om behållare kan kapslas, kräver de flesta layouter inte en kapslad container.

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

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

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

Responsiva brytpunkter

Eftersom Bootstrap är utvecklad för att vara mobil 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

Observera att eftersom webbläsare för närvarande inte stöder intervallkontextfrågor , arbetar vi kring begränsningarna för min-och max-prefix och visningsportar med bråkbredder (vilket kan inträffa under vissa förhållanden på enheter med hög dpi, till exempel) genom att använda värden med högre precision för dessa jämförelser .

Å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.