Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Konteinerid

Konteinerid on Bootstrapi põhiline ehitusplokk, mis sisaldab, polsterdab ja joodab teie sisu antud seadmes või vaateaknas.

Kuidas nad töötavad

Konteinerid on Bootstrapi kõige elementaarsem paigutuselement ja need on vajalikud meie vaikevõrgusüsteemi kasutamisel . Konteinereid kasutatakse nende sees oleva sisu mahutamiseks, polsterdamiseks ja (mõnikord) tsentreerimiseks. Kuigi konteinereid saab pesastada, ei vaja enamik paigutusi pesastatud konteinerit.

Bootstrapil on kolm erinevat konteinerit:

  • .container, mis määrab max-widthigale reageerivale murdepunktile a
  • .container-{breakpoint}, mis on width: 100%kuni määratud katkestuspunktini
  • .container-fluid, mis on width: 100%kõigis murdepunktides

Allolev tabel illustreerib iga konteineri max-widthvõrdlust originaaliga .containerja .container-fluidiga katkestuspunkti lõikes.

Vaadake neid töös ja võrrelge neid meie ruudustiku näites .

Eriti väike
<576 pikslit
Väike
≥576 pikslit
Keskmine
≥768 pikslit
Suur
≥992 pikslit
X-suur
≥1200 pikslit
XX-suur
≥1400 pikslit
.container 100% 540 pikslit 720 pikslit 960 pikslit 1140 pikslit 1320 pikslit
.container-sm 100% 540 pikslit 720 pikslit 960 pikslit 1140 pikslit 1320 pikslit
.container-md 100% 100% 720 pikslit 960 pikslit 1140 pikslit 1320 pikslit
.container-lg 100% 100% 100% 960 pikslit 1140 pikslit 1320 pikslit
.container-xl 100% 100% 100% 100% 1140 pikslit 1320 pikslit
.container-xxl 100% 100% 100% 100% 100% 1320 pikslit
.container-fluid 100% 100% 100% 100% 100% 100%

Vaikimisi konteiner

Meie vaikeklass .containeron tundlik fikseeritud laiusega konteiner, mis tähendab, et see max-widthmuutub igas katkestuspunktis.

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

Reageerivad konteinerid

Reageerivad konteinerid võimaldavad teil määrata 100% laiuse klassi kuni määratud katkestuspunktini, pärast mida rakendame max-widthiga kõrgema murdepunkti jaoks s-i. Näiteks .container-smon 100% lai, et alustada kuni smkatkestuspunktini, kus seda suurendatakse md, lg, xl, ja xxl.

<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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Vedeliku mahutid

Kasutage .container-fluidtäislaiuse konteineri jaoks, mis katab kogu vaateava laiuse.

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

Sass

Nagu ülal näidatud, loob Bootstrap rea eelmääratletud konteinerklasse, mis aitavad teil soovitud paigutusi luua. Saate kohandada neid eelmääratletud konteinerklasse, muutes neid pakkuvat Sassi kaarti (leidav ​​kohast _variables.scss):

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Lisaks Sassi kohandamisele saate meie Sassi seguga luua ka oma konteinereid.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Lisateavet ja näiteid meie Sassi kaartide ja muutujate muutmise kohta leiate Gridi dokumentatsiooni Sassi jaotisest .