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 . Containere bruges til at indeholde, polstre og (nogle gange) centrere indholdet i dem. Selvom containere kan indlejres, kræver de fleste layouts ikke en indlejret container.

Bootstrap leveres med tre forskellige beholdere:

• .container, som indstiller a max-widthved hvert responsivt brudpunkt
• .container-fluid, som er width: 100%på alle brudpunkter
• .container-{breakpoint}, hvilket er width: 100%indtil det angivne brudpunkt

Tabellen nedenfor illustrerer, hvordan hver beholder er max-widthsammenlignet med originalen .containerog .container-fluidpå tværs af hvert brudpunkt.

Se dem i aktion, og sammenlign dem i vores Grid-eksempel .

Alt i en

Vores standardklasse .containerer en responsiv container med fast bredde, hvilket betyder, at dens max-widthændringer ved hvert brudpunkt.

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

Væske

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

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

Lydhør

Responsive containere er nye i Bootstrap v4.4. De giver dig mulighed for at angive en klasse, der er 100 % bred, indtil det angivne brudpunkt er nået, hvorefter vi anvender max-widths for hvert af de højere brudpunkter. For eksempel .container-smer den 100 % bred for at starte, indtil smbrudpunktet er nået, hvor den skaleres op med md, lg, og 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>

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

Da vi skriver vores kilde-CSS i Sass, er alle vores medieforespørgsler tilgængelige 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 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) { ... }
// 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;
  }
}

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.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

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

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.