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ä.

Tällä sivulla

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-{breakpoint}, joka on width: 100%määritettyyn keskeytyskohtaan asti
.container-fluid, joka on width: 100%kaikissa keskeytyspisteissä

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 kuvapistettä	Keskikokoinen ≥768 kuvapistettä	Suuri ≥ 992 kuvapistettä	X-suuri ≥ 1200 pikseliä	XX-suuri ≥ 1400 pikseliä
`.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 .