Oversigt

Komponenter og muligheder for at udforme dit Bootstrap-projekt, herunder indpakning af beholdere, et kraftfuldt gittersystem, et fleksibelt medieobjekt og responsive hjælpeklasser.

Containere

Containere er det mest basale layoutelement i Bootstrap og er påkrævet, når du bruger vores standard gittersystem . Vælg mellem en responsiv beholder med fast bredde (dvs. dens max-widthændringer ved hvert brudpunkt) eller væskebredde (hvilket betyder, at den er 100%bred hele tiden).

Selvom containere kan indlejres, kræver de fleste layouts ikke en indlejret container.

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

Bruges .container-fluidtil en beholder i fuld bredde, der spænder over hele visningsportens bredde.

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

Responsive brudpunkter

Da Bootstrap er udviklet til at være mobil først, bruger vi en håndfuld medieforespørgsler til at skabe fornuftige brudpunkter for vores layout og grænseflader. Disse brudpunkter er for det meste baseret på minimum viewport-bredder og giver os mulighed for at skalere elementer op, efterhånden som viewporten ændres.

Bootstrap bruger primært følgende medieforespørgselsområder – eller brudpunkter – i vores Sass-kildefiler til vores layout, gittersystem og komponenter.

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

Da vi skriver vores kilde-CSS i Sass, er alle vores medieforespørgsler tilgængelige via Sass-mixins:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Vi bruger lejlighedsvis medieforespørgsler, der går i den anden retning (den givne skærmstørrelse 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

Endnu en gang er disse medieforespørgsler også tilgængelige via Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Der er også medieforespørgsler og mixins til at målrette mod et enkelt segment af skærmstørrelser ved brug af minimums- og maksimumsbrudpunktsbredderne.

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

Disse medieforespørgsler er også tilgængelige 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å samme måde kan medieforespørgsler strække sig over flere brudpunktsbredder:

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

Sass-blandingen til at målrette mod det samme skærmstørrelsesområde ville være:

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

Z-indeks

Adskillige Bootstrap-komponenter bruger z-index, CSS-egenskaben, der hjælper med at kontrollere layoutet ved at give en tredje akse til at arrangere indhold. Vi bruger en standard z-indeksskala i Bootstrap, der er designet til korrekt lagnavigation, værktøjstip og popovers, modaler og mere.

Disse højere værdier starter ved et vilkårligt tal, højt og specifikt nok til ideelt set at undgå konflikter. Vi har brug for et standardsæt af disse på tværs af vores lagdelte komponenter – værktøjstip, popovers, navbarer, dropdowns, modaler – så vi kan være rimelig konsekvente i adfærden. Der er ingen grund til, at vi ikke kunne have brugt 100+ eller 500+.

Vi opfordrer ikke til tilpasning af disse individuelle værdier; skulle du ændre en, skal du sandsynligvis ændre dem alle.

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

For at håndtere overlappende grænser inden for komponenter (f.eks. knapper og input i inputgrupper), bruger vi lave enkeltcifrede z-indexværdier af 1, 2, og 3som standard, hover og aktive tilstande. På hover/focus/active bringer vi et bestemt element i forgrunden med en højere z-indexværdi for at vise deres grænse over søskendeelementerne.