in English

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 systému dvanástich stĺpcov, piatim predvoleným responzívnym vrstvám, premenným a mixinom Sass a desiatkam preddefinovaných tried.

Ako to funguje

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.

Jeden z troch stĺpcov

<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 .containerpre responzívnu šírku pixelov alebo .container-fluidpre width: 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. To paddingsa 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 widthautomaticky rozložia ako stĺpce rovnakej šírky. Napríklad štyri prípady .col-smbudú 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 widthsú 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ť marginz riadkov a paddingzo stĺpcov .no-gutterspomocou .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-4vzťahujú na malé, stredné, veľké a extra veľké zariadenia, ale nie na prvý xsbod 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 .

Možnosti mriežky

Zatiaľ čo Bootstrap používa ems alebo rems na definovanie väčšiny veľkostí, pxs 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

Automatické rozloženie stĺpcov

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.

Rovnaká šírka

Tu sú napríklad dve rozloženia mriežky, ktoré sa vzťahujú na každé zariadenie a výrez, od xsdo 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.

1 z 2

2 z 2

1 z 3

2 z 3

3 z 3

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

Viacriadkový rovnako široký

Vytvorte stĺpce s rovnakou šírkou, ktoré presahujú viacero riadkov, vložením písmena a .w-100tam, kde sa majú stĺpce rozdeliť na nový riadok. Zabezpečte, aby prestávky reagovali zmiešaním .w-100s niektorými responzívnymi zobrazovacími pomôckami .

Vyskytla sa chyba Safari flexbox , ktorá zabránila tomu, aby to fungovalo bez explicitného flex-basisalebo border. Existujú riešenia pre staršie verzie prehliadačov, ale nemali by byť potrebné, ak vaše cieľové prehliadače nespadajú do chybných verzií.

kol

<div class="container">
  <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>
</div>

Nastavenie šírky jedného stĺpca

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.

1 z 3

2 z 3 (širšie)

3 z 3

1 z 3

2 z 3 (širšie)

3 z 3

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

Obsah variabilnej šírky

Pomocou col-{breakpoint}-autotried upravte veľkosť stĺpcov na základe prirodzenej šírky ich obsahu.

1 z 3

Obsah variabilnej šírky

3 z 3

1 z 3

Obsah variabilnej šírky

3 z 3

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

Responzívne triedy

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

Všetky body zlomu

Pre mriežky, ktoré sú rovnaké od najmenšieho zariadenia po najväčšie, použite triedy .cola . .col-*Zadajte očíslovanú triedu, keď potrebujete stĺpec obzvlášť veľkej veľkosti; inak sa kľudne držte .col.

kol

stĺpik-8

stĺpik-4

<div class="container">
  <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>
</div>

Naskladané do vodorovnej polohy

Pomocou jedinej sady .col-sm-*tried môžete vytvoriť základný mriežkový systém, ktorý začína naskladaným a stáva sa horizontálnym pri malom bode prerušenia ( sm).

col-sm-8

col-sm-4

col-sm

<div class="container">
  <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>
</div>

Pomiešaj a vyber

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.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

Odkvapy

Odkvapové žľaby môžu byť responzívne prispôsobené výplňou špecifickým pre bod zlomu a triedami užitočnosti zápornej marže. Ak chcete zmeniť odkvapy v danom riadku, spárujte obslužný program so zápornou maržou na zariadení .rowa zodpovedajúci obslužný program výplne na .cols. Možno bude potrebné upraviť aj rodič .containeralebo rodič, aby sa predišlo nežiaducemu pretečeniu, pomocou znovu zodpovedajúceho nástroja na vypchávanie..container-fluid

Tu je príklad prispôsobenia mriežky Bootstrap pri veľkom bode lgzlomu ( ) a vyššie. Zväčšili sme .colvýplň pomocou .px-lg-5, vyrovnali sme tomu s .mx-lg-n5na rodičovi .rowa potom sme upravili .containerobal pomocou .px-lg-5.

Vlastné odsadenie stĺpcov

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Riadkové stĺpce

Pomocou responzívnych .row-cols-*tried rýchlo nastavte počet stĺpcov, ktoré najlepšie vykreslia váš obsah a rozloženie. Zatiaľ čo normálne .col-*triedy platia pre jednotlivé stĺpce (napr. .col-md-4), triedy riadkových stĺpcov sú nastavené na rodičovi .rowako skratka.

Pomocou týchto tried stĺpcov riadkov môžete rýchlo vytvoriť základné rozloženia mriežky alebo ovládať rozloženia kariet.

Stĺpec

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Stĺpec

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Stĺpec

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Stĺpec

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Stĺpec

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Môžete tiež použiť sprievodný mix Sass row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Zarovnanie

Na vertikálne a horizontálne zarovnanie stĺpcov použite nástroje na zarovnanie flexboxu. Internet Explorer 10-11 nepodporuje vertikálne zarovnanie flexibilných položiek, ak má flexibilný kontajner symbol, min-heightako je znázornené nižšie. Ďalšie podrobnosti nájdete v časti Flexbugs #3.

Vertikálne zarovnanie

Jeden z troch stĺpcov

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

Jeden z troch stĺpcov

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

Horizontálne zarovnanie

Jeden z dvoch stĺpcov

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

Žiadne odkvapy

Odkvapy medzi stĺpmi v našich preddefinovaných triedach mriežky je možné odstrániť pomocou .no-gutters. Tým sa odstráni záporné margins .rowa vodorovné paddingzo 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 .containeralebo .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Obalenie stĺpcov

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.

.col-9

.col-4
Keďže 9 + 4 = 13 > 12, tento 4-stĺpcový div sa zabalí do nového riadku ako jedna súvislá jednotka.

.col-6
Nasledujúce stĺpce pokračujú pozdĺž nového riadku.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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>
</div>

Stĺpec sa zlomí

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 .rows, ale nie každá metóda implementácie to môže zodpovedať.

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

Túto prestávku môžete použiť aj v konkrétnych bodoch prerušenia pomocou našich pomôcok pre citlivé zobrazenie .

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

Zmena poradia

Objednať triedy

Použite .order-triedy na ovládanie vizuálneho poradia vášho obsahu. Tieto triedy sú responzívne, takže môžete nastaviť orderbod prerušenia (napr. .order-1.order-md-2). Zahŕňa podporu pre 1cez 12všetkých päť úrovní mriežky.

Najprv v DOM, neuplatnila sa žiadna objednávka

Druhý v DOM, s väčšou objednávkou

Tretí v DOM s poradím 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Existujú aj responzívne .order-firsta .order-lasttriedy, ktoré menia orderelement použitím order: -1a order: 13( order: $columns + 1). Tieto triedy môžu byť .order-*podľa potreby tiež zmiešané s očíslovanými triedami.

Prvý v DOM, objednaný posledný

Druhý v DOM, bez poradia

Tretie v DOM, objednané ako prvé

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Odsadenie stĺpcov

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

Offsetové triedy

Presuňte stĺpce doprava pomocou .offset-md-*tried. Tieto triedy zväčšujú ľavý okraj stĺpca o *stĺpce. Napríklad .offset-md-4prejde .col-md-4cez štyri stĺpce.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>
</div>

Okrem vymazania stĺpca pri responzívnych prerušovacích bodoch možno budete musieť vynulovať posuny. Pozrite si to v akcii v príklade mriežky .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</div>

Okrajové nástroje

S prechodom na flexbox vo verzii 4 môžete použiť pomocné nástroje okrajov, ako napríklad .mr-autovynútenie súrodeneckých stĺpcov od seba.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</div>

Hniezdenie

Ak chcete obsah vnoriť do predvolenej mriežky, pridajte nový stĺpec .rowa 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).

Úroveň 1: .col-sm-9

Úroveň 2: .col-8 .col-sm-6

Úroveň 2: .col-4 .col-sm-6

<div class="container">
  <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>
</div>

Sass mixins

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é

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.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Mixins

Mixiny sa používajú v spojení s premennými mriežky na generovanie sémantických CSS pre jednotlivé stĺpce mriežky.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Príklad použitia

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.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Hlavný obsah

Sekundárny obsah

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

Prispôsobenie mriežky

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.

Stĺpy a žľaby

Počet stĺpcov mriežky je možné upraviť pomocou premenných Sass. $grid-columnssa používa na generovanie šírky (v percentách) každého jednotlivého stĺpca a zároveň $grid-gutter-widthnastavuje šírku odkvapov stĺpcov.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Vrstvy mriežky

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-breakpointsa $container-max-widthsna niečo takéto:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

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 %).