Mriežkový systém
Použite našu výkonnú mriežku flexboxov pre mobilné zariadenia na vytváranie rozložení všetkých tvarov a veľkostí vďaka dvanásťstĺpcovému systému, piatim predvoleným responzívnym vrstvám, premenným Sass a mixinom a desiatkam preddefinovaných tried.
Mriežkový systém Bootstrapu používa na rozloženie a zarovnanie obsahu sériu kontajnerov, riadkov a stĺpcov. Je postavený s flexboxom a je plne citlivý. Nižšie je uvedený príklad a hĺbkový pohľad na to, ako sa mriežka spája.
Ste novým používateľom flexboxu alebo ho ešte nepoznáte? Prečítajte si túto príručku CSS Tricks flexbox , kde nájdete pozadie, terminológiu, pokyny a úryvky kódu.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Vyššie uvedený príklad vytvorí tri stĺpce rovnakej šírky na malých, stredných, veľkých a extra veľkých zariadeniach pomocou našich preddefinovaných tried mriežky. Tieto stĺpce sú vycentrované na stránke s nadradeným .container
.
Keď to rozoberieme, funguje to takto:
- Kontajnery poskytujú prostriedky na vycentrovanie a vodorovné vloženie obsahu vašej lokality. Použite
.container
pre responzívnu šírku pixelov alebo.container-fluid
prewidth: 100%
všetky veľkosti zobrazovanej oblasti a zariadenia. - Riadky sú obaly pre stĺpce. Každý stĺp má vodorovný
padding
(nazývaný odkvap) na kontrolu priestoru medzi nimi. Topadding
sa potom vyrovnáva na riadkoch so zápornými okrajmi. Týmto spôsobom je všetok obsah vo vašich stĺpcoch vizuálne zarovnaný na ľavej strane. - V rozložení mriežky musí byť obsah umiestnený v stĺpcoch a iba stĺpce môžu byť priamymi potomkami riadkov.
- Vďaka flexboxu sa stĺpce mriežky bez špecifikácie
width
automaticky rozložia ako stĺpce rovnakej šírky. Napríklad štyri prípady.col-sm
budú mať každý automaticky šírku 25 % od malého bodu zlomu a vyššie. Ďalšie príklady nájdete v časti stĺpce automatického rozloženia . - Triedy stĺpcov označujú počet stĺpcov, ktoré by ste chceli použiť, z 12 možných na riadok. Ak teda chcete mať tri stĺpce rovnakej šírky, môžete použiť
.col-4
. - Stĺpce
width
sú nastavené v percentách, takže sú vždy plynulé a majú veľkosť vzhľadom na ich nadradený prvok. - Stĺpce sú horizontálne
padding
, aby sa vytvorili žľaby medzi jednotlivými stĺpmi, môžete ich však odstrániťmargin
z riadkov apadding
zo stĺpcov.no-gutters
pomocou.row
. - Aby mriežka reagovala, existuje päť bodov prerušenia mriežky, jeden pre každý citlivý bod prerušenia : všetky body prerušenia (extra malé), malé, stredné, veľké a extra veľké.
- Body prerušenia mriežky sú založené na dopytoch na médiá o minimálnej šírke, čo znamená, že sa vzťahujú na tento jeden bod prerušenia a všetky nad ním (napr. sa
.col-sm-4
vzťahujú na malé, stredné, veľké a extra veľké zariadenia, ale nie na prvýxs
bod prerušenia). - Na sémantické označenie môžete použiť preddefinované triedy mriežky (napríklad
.col-4
) alebo mixiny Sass .
Buďte si vedomí obmedzení a chýb okolo flexboxu , ako napríklad nemožnosť použiť niektoré HTML elementy ako flex kontajnery .
Zatiaľ čo Bootstrap používa em
s alebo rem
s na definovanie väčšiny veľkostí, px
s sa používajú na zarážky mriežky a šírky kontajnera. Je to preto, že šírka výrezu je v pixeloch a nemení sa s veľkosťou písma .
Pozrite sa, ako aspekty mriežkového systému Bootstrap fungujú na viacerých zariadeniach pomocou praktickej tabuľky.
Extra malý <576px |
Malé ≥ 576 pixelov |
Stredná ≥768 pixelov |
Veľký ≥992 pixelov |
Extra veľké ≥1200 pixelov |
|
---|---|---|---|---|---|
Maximálna šírka kontajnera | Žiadne (automaticky) | 540 pixelov | 720 pixelov | 960 pixelov | 1140 pixelov |
Predpona triedy | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
počet stĺpcov | 12 | ||||
Šírka odkvapu | 30 pixelov (15 pixelov na každej strane stĺpca) | ||||
Vnoriteľné | Áno | ||||
Usporiadanie stĺpcov | Áno |
Využite triedy stĺpcov špecifické pre bod prerušenia na jednoduché nastavenie veľkosti stĺpcov bez explicitnej očíslovanej triedy, ako je .col-sm-6
.
Tu sú napríklad dve rozloženia mriežky, ktoré sa vzťahujú na každé zariadenie a výrez, od xs
do xl
. Pridajte ľubovoľný počet tried bez jednotiek pre každý bod prerušenia, ktorý potrebujete, a každý stĺpec bude mať rovnakú šírku.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Stĺpce rovnakej šírky je možné rozdeliť do viacerých riadkov, vyskytla sa však chyba flexboxu Safari , ktorá zabránila tomu, aby to fungovalo bez explicitného flex-basis
alebo border
. Existujú náhradné riešenia pre staršie verzie prehliadačov, ale ak máte aktuálne informácie, nemali by byť potrebné.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Automatické rozloženie pre stĺpce mriežky flexboxu tiež znamená, že môžete nastaviť šírku jedného stĺpca a nechať okolo neho automaticky meniť veľkosť súrodeneckých stĺpcov. Môžete použiť preddefinované triedy mriežky (ako je uvedené nižšie), mixy mriežok alebo šírky riadkov. Upozorňujeme, že veľkosť ostatných stĺpcov sa zmení bez ohľadu na šírku stredového stĺpca.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Pomocou col-{breakpoint}-auto
tried upravte veľkosť stĺpcov na základe prirodzenej šírky ich obsahu.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Vytvorte stĺpce rovnakej šírky, ktoré sa rozprestierajú vo viacerých riadkoch, vložením písmena a .w-100
tam, kde chcete, aby sa stĺpce zalomili na nový riadok. Zabezpečte, aby prestávky reagovali zmiešaním .w-100
s niektorými responzívnymi zobrazovacími pomôckami .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Mriežka Bootstrapu obsahuje päť úrovní preddefinovaných tried na vytváranie komplexných responzívnych rozložení. Prispôsobte veľkosť svojich stĺpcov na extra malých, malých, stredných, veľkých alebo extra veľkých zariadeniach, ako uznáte za vhodné.
Pre mriežky, ktoré sú rovnaké od najmenšieho zariadenia po najväčšie, použite triedy .col
a . .col-*
Zadajte očíslovanú triedu, keď potrebujete stĺpec obzvlášť veľkej veľkosti; inak sa kľudne držte .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Pomocou jedinej množiny .col-sm-*
tried môžete vytvoriť základný mriežkový systém, ktorý začína naskladaný a potom sa stane horizontálnym s malým bodom prerušenia ( sm
).
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Nechcete, aby sa vaše stĺpce jednoducho ukladali do niekoľkých vrstiev mriežky? Podľa potreby použite kombináciu rôznych tried pre každú úroveň. Pre lepšiu predstavu, ako to celé funguje, si pozrite príklad nižšie.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Na vertikálne a horizontálne zarovnanie stĺpcov použite nástroje na zarovnanie flexboxu.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Odkvapy medzi stĺpmi v našich preddefinovaných triedach mriežky je možné odstrániť pomocou .no-gutters
. Toto odstráni záporné margin
s .row
a horizontálne padding
zo všetkých bezprostredných podradených stĺpcov.
Tu je zdrojový kód na vytváranie týchto štýlov. Všimnite si, že prepisy stĺpcov sa vzťahujú len na prvé podradené stĺpce a sú zacielené prostredníctvom selektora atribútov . Aj keď to generuje špecifickejší selektor, výplň stĺpcov je možné ešte viac prispôsobiť pomocou nástrojov na úpravu medzier .
Potrebujete dizajn od okraja po okraj? Zahodiť rodiča .container
alebo .container-fluid
.
V praxi to vyzerá takto. Všimnite si, že to môžete naďalej používať so všetkými ostatnými preddefinovanými triedami mriežky (vrátane šírok stĺpcov, responzívnych vrstiev, zmien poradia a ďalších).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Ak je v jednom riadku umiestnených viac ako 12 stĺpcov, každá skupina ďalších stĺpcov sa ako jedna jednotka zalomí do nového riadku.
Keďže 9 + 4 = 13 > 12, tento 4-stĺpcový div sa zabalí do nového riadku ako jedna súvislá jednotka.
Nasledujúce stĺpce pokračujú pozdĺž nového riadku.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Rozdelenie stĺpcov na nový riadok vo flexboxe vyžaduje malý hack: pridajte prvok s width: 100%
kdekoľvek chcete zalomiť stĺpce do nového riadku. Normálne sa to dosiahne pomocou viacerých .row
s, ale nie každá metóda implementácie to môže zodpovedať.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
Túto prestávku môžete použiť aj v konkrétnych bodoch prerušenia pomocou našich pomôcok pre citlivé zobrazenie .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
Použite .order-
triedy na ovládanie vizuálneho poradia vášho obsahu. Tieto triedy sú responzívne, takže môžete nastaviť order
bod prerušenia (napr. .order-1.order-md-2
). Zahŕňa podporu pre 1
cez 12
všetkých päť úrovní mriežky.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Existujú aj responzívne .order-first
a .order-last
triedy, ktoré menia order
element použitím order: -1
a order: 13
( order: $columns + 1
). Tieto triedy môžu byť .order-*
podľa potreby tiež zmiešané s očíslovanými triedami.
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
Stĺpce mriežky môžete odsadiť dvoma spôsobmi: našimi responzívnymi .offset-
triedami mriežky a našimi nástrojmi na vytváranie okrajov . Triedy mriežky majú veľkosť tak, aby zodpovedali stĺpcom, zatiaľ čo okraje sú užitočnejšie pre rýchle rozloženia, kde je šírka odsadenia premenlivá.
Presuňte stĺpce doprava pomocou .offset-md-*
tried. Tieto triedy zväčšujú ľavý okraj stĺpca o *
stĺpce. Napríklad .offset-md-4
prejde .col-md-4
cez štyri stĺpce.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Okrem vymazania stĺpcov pri responzívnych prerušovacích bodoch možno budete musieť vynulovať posuny. Pozrite si to v akcii v príklade mriežky .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
S prechodom na flexbox vo verzii 4 môžete použiť pomocné nástroje okrajov, ako napríklad .mr-auto
vynútenie súrodeneckých stĺpcov od seba.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Ak chcete obsah vnoriť do predvolenej mriežky, pridajte nový stĺpec .row
a množinu .col-sm-*
stĺpcov do existujúceho .col-sm-*
stĺpca. Vnorené riadky by mali obsahovať množinu stĺpcov, ktorých súčet môže byť maximálne 12 (nevyžaduje sa, aby ste použili všetkých 12 dostupných stĺpcov).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Pri používaní zdrojových súborov Sass od Bootstrapu máte možnosť použiť premenné a mixiny Sass na vytvorenie vlastných, sémantických a responzívnych rozložení stránok. Naše preddefinované triedy mriežky používajú tie isté premenné a mixiny, aby poskytli celú sadu tried pripravených na použitie pre rýchle reagujúce rozloženia.
Premenné a mapy určujú počet stĺpcov, šírku medzery a bod mediálneho dotazu, v ktorom sa majú začať plávajúce stĺpce. Používame ich na generovanie preddefinovaných tried mriežky zdokumentovaných vyššie, ako aj pre vlastné mixy uvedené nižšie.
Mixiny sa používajú v spojení s premennými mriežky na generovanie sémantických CSS pre jednotlivé stĺpce mriežky.
Premenné môžete upraviť na svoje vlastné hodnoty, alebo jednoducho použiť mixiny s ich predvolenými hodnotami. Tu je príklad použitia predvolených nastavení na vytvorenie rozloženia s dvoma stĺpcami s medzerou medzi nimi.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Pomocou našich vstavaných premenných a máp mriežky Sass je možné úplne prispôsobiť preddefinované triedy mriežky. Zmeňte počet vrstiev, rozmery mediálnych dopytov a šírky kontajnera – potom znova skompilujte.
Počet stĺpcov mriežky je možné upraviť pomocou premenných Sass. $grid-columns
sa používa na generovanie šírky (v percentách) každého jednotlivého stĺpca, pričom $grid-gutter-width
umožňuje šírky špecifické pre bod zlomu, ktoré sú rozdelené rovnomerne naprieč padding-left
a padding-right
pre odkvapy stĺpcov.
Ak prejdete za samotné stĺpce, môžete tiež prispôsobiť počet vrstiev mriežky. Ak by ste chceli iba štyri úrovne mriežky, aktualizovali by ste $grid-breakpoints
a $container-max-widths
na niečo takéto:
Pri vykonávaní akýchkoľvek zmien v premenných alebo mapách Sass budete musieť zmeny uložiť a prekompilovať. Ak tak urobíte, vytvorí sa úplne nová sada preddefinovaných tried mriežky pre šírky stĺpcov, posuny a zoradenie. Aktualizujú sa aj nástroje pre responzívnu viditeľnosť, aby používali vlastné body prerušenia. Nezabudnite nastaviť hodnoty mriežky v px
(nie rem
, em
, alebo %
).