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 amax-width
:n jokaiseen reagoivaan keskeytyskohtaan.container-fluid
, joka onwidth: 100%
kaikissa keskeytyspisteissä.container-{breakpoint}
, joka onwidth: 100%
määritettyyn keskeytyskohtaan asti
Alla oleva taulukko havainnollistaa kunkin säilön max-width
vertailua alkuperäiseen .container
ja .container-fluid
kunkin 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 .container
on responsiivinen, kiinteän levyinen säilö, mikä tarkoittaa, että se max-width
muuttuu 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-width
s:tä jokaiselle korkeammalle keskeytyspisteelle. Esimerkiksi .container-sm
on 100 % leveä aloittaakseen, kunnes sm
keskeytyskohta 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-fluid
tä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 .