Siirry pääsisältöön Siirry dokumenttien navigointiin
in English

Säiliöt

Säilöt ovat Bootstrapin perustavanlaatuinen rakennuspalikka, jotka sisältävät, täyttävät ja kohdistavat sisältösi tietyn laitteen tai katseluportin sisällä.

Miten ne toimivat

Säilöt ovat Bootstrapin yksinkertaisin asetteluelementti, ja niitä vaaditaan käytettäessä oletusruudukkojärjestelmäämme . Säiliöitä käytetään sisällön säilyttämiseen, täyttämiseen ja (joskus) keskittämiseen. Vaikka säilöjä voidaan upottaa, useimmat asettelut eivät vaadi sisäkkäistä säilöä.

Bootstrapissa on kolme erilaista konttia:

  • .container, joka asettaa a max-width:n jokaiseen reagoivaan keskeytyskohtaan
  • .container-fluid, joka on width: 100%kaikissa keskeytyspisteissä
  • .container-{breakpoint}, joka on width: 100%määritettyyn keskeytyskohtaan asti

Alla oleva taulukko havainnollistaa kunkin säilön max-widthvertailua alkuperäiseen .containerja .container-fluidkunkin keskeytyskohdan välillä.

Katso ne toiminnassa ja vertaa niitä Grid-esimerkissämme .

Erittäin pieni
<576px
Pieni
≥ 576 pikseliä
Keskikokoinen
≥ 768 kuvapistettä
Suuri
≥ 992 pikseliä
X-Large
≥1200px
XX-Large
≥1400px
.container 100 % 540 pikseliä 720 pikseliä 960 pikseliä 1140 pikseliä 1320 pikseliä
.container-sm 100 % 540 pikseliä 720 pikseliä 960 pikseliä 1140 pikseliä 1320 pikseliä
.container-md 100 % 100 % 720 pikseliä 960 pikseliä 1140 pikseliä 1320 pikseliä
.container-lg 100 % 100 % 100 % 960 pikseliä 1140 pikseliä 1320 pikseliä
.container-xl 100 % 100 % 100 % 100 % 1140 pikseliä 1320 pikseliä
.container-xxl 100 % 100 % 100 % 100 % 100 % 1320 pikseliä
.container-fluid 100 % 100 % 100 % 100 % 100 % 100 %

Oletussäiliö

Oletusluokkamme .containeron responsiivinen, kiinteän levyinen säilö, mikä tarkoittaa, että se max-widthmuuttuu jokaisessa keskeytyskohdassa.

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

Responsiiviset säiliöt

Responsiivisten säilöjen avulla voit määrittää luokan, joka on 100 % leveä, kunnes määritetty keskeytyspiste saavutetaan, minkä jälkeen käytämme max-widths:tä jokaiselle korkeammalle keskeytyspisteelle. Esimerkiksi .container-smon 100 % leveä aloittaakseen, kunnes smkeskeytyskohta saavutetaan, jolloin se skaalautuu 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>

Nestesäiliöt

Käytä .container-fluidtäysleveälle säiliölle, joka kattaa koko näkymän leveyden.

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

Sass

Kuten yllä näkyy, Bootstrap luo sarjan ennalta määritettyjä säilöluokkia, jotka auttavat sinua luomaan haluamasi asettelut. Voit mukauttaa näitä ennalta määritettyjä säilöluokkia muokkaamalla Sass-karttaa (löytyy osoitteesta _variables.scss), joka käyttää niitä:

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

Sassin räätälöinnin lisäksi voit myös luoda omia säiliöitä Sass-miksiinimme avulla.

// 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();
}

Lisätietoja ja esimerkkejä Sass-karttojen ja muuttujien muokkaamisesta on Grid-dokumentaation Sass-osiossa .