Oversikt

Komponenter og alternativer for å legge ut Bootstrap-prosjektet ditt, inkludert innpakning av beholdere, et kraftig rutenettsystem, et fleksibelt medieobjekt og responsive verktøyklasser.

Containere

Beholdere er det mest grunnleggende layoutelementet i Bootstrap og kreves når du bruker vårt standard rutenettsystem . Beholdere brukes til å inneholde, fylle og (noen ganger) sentrere innholdet i dem. Selv om containere kan nestes, krever de fleste oppsett ikke en nestet container.

Bootstrap kommer med tre forskjellige beholdere:

• .container, som setter a max-widthved hvert responsivt bruddpunkt
• .container-fluid, som er width: 100%på alle bruddpunkter
• .container-{breakpoint}, som er width: 100%til det angitte bruddpunktet

Tabellen nedenfor illustrerer hvordan hver beholder er max-widthsammenlignet med originalen .containerog .container-fluidpå tvers av hvert bruddpunkt.

Se dem i aksjon og sammenlign dem i Grid-eksemplet vårt .

Alt i et

Standardklassen vår .containerer en responsiv beholder med fast bredde, noe som betyr at den max-widthendres ved hvert bruddpunkt.

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

Væske

Bruk .container-fluidfor en beholder i full bredde, som spenner over hele bredden av visningsporten.

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

Mottakelig

Responsive containere er nye i Bootstrap v4.4. De lar deg spesifisere en klasse som er 100 % bred til det angitte bruddpunktet er nådd, hvoretter vi bruker max-widths for hvert av de høyere bruddpunktene. Er for eksempel .container-sm100 % bred for å starte til smbruddpunktet er nådd, hvor den skaleres opp 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 bruddpunkter

Siden Bootstrap er utviklet for å være mobil først, bruker vi en håndfull mediespørringer for å lage fornuftige bruddpunkter for layoutene og grensesnittene våre. Disse bruddpunktene er for det meste basert på minimum viewport-bredder og lar oss skalere opp elementer etter hvert som viewporten endres.

Bootstrap bruker først og fremst følgende mediespørringsområder – eller bruddpunkter – i Sass-kildefilene våre for layout, rutenettsystem 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) { ... }

Siden vi skriver vår kilde-CSS i Sass, er alle våre medieforespørsler tilgjengelige 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 bruker av og til mediespørringer som går i den andre retningen (den gitte skjermstørrelsen 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

Nok en gang er disse mediespørringene også tilgjengelige 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 er også mediespørringer og blandinger for å målrette mot et enkelt segment av skjermstørrelser ved å bruke minimums- og maksimumsbredde for bruddpunkt.

// 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 mediespørringene er også tilgjengelige 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åte kan mediesøk spenne over flere bruddpunktbredder:

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

Sass-miksingen for å målrette mot samme skjermstørrelsesområde vil være:

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

Z-indeks

Flere Bootstrap-komponenter bruker z-index, CSS-egenskapen som hjelper til med å kontrollere layout ved å tilby en tredje akse for å arrangere innhold. Vi bruker en standard z-indeksskala i Bootstrap som er utformet for riktig lagnavigasjon, verktøytips og popovers, modaler og mer.

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.