Mřížkový systém

Použijte naši výkonnou mobilní flexbox mřížku k vytvoření rozvržení všech tvarů a velikostí díky dvanácti sloupcovému systému, pěti výchozím responzivním úrovním, Sass proměnným a mixinům a desítkám předdefinovaných tříd.

Jak to funguje

Mřížkový systém Bootstrapu používá k rozvržení a zarovnání obsahu řadu kontejnerů, řádků a sloupců. Je postaven s flexboxem a je plně citlivý. Níže je uveden příklad a podrobný pohled na to, jak se mřížka spojuje.

Nový nebo neznáte flexbox? Přečtěte si tuto příručku CSS Tricks flexbox , kde najdete pozadí, terminologii, pokyny a úryvky kódu.

Jeden ze tří sloupců

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

Výše uvedený příklad vytvoří tři sloupce stejné šířky na malých, středních, velkých a extra velkých zařízeních pomocí našich předdefinovaných tříd mřížky. Tyto sloupce jsou vycentrovány na stránce s nadřazeným prvkem .container.

Když to rozebereme, funguje to takto:

Kontejnery poskytují prostředky k vystředění a vodorovnému vyložení obsahu vašeho webu. Použijte .containerpro responzivní šířku pixelů nebo .container-fluidpro width: 100%všechny velikosti zobrazovaných oblastí a zařízení.
Řádky jsou obaly pro sloupce. Každý sloup má horizontální padding(tzv. okap) pro ovládání prostoru mezi nimi. To paddingse pak vyrovnává na řádcích se zápornými okraji. Tímto způsobem je veškerý obsah ve vašich sloupcích vizuálně zarovnán po levé straně.
V rozvržení mřížky musí být obsah umístěn ve sloupcích a pouze sloupce mohou být přímými potomky řádků.
Díky flexboxu se sloupce mřížky bez specifikovaného widthautomaticky rozloží jako sloupce stejné šířky. Například čtyři instance .col-smbudou mít každý automaticky šířku 25 % od malého bodu přerušení a výše. Další příklady naleznete v části sloupce automatického rozvržení .
Třídy sloupců udávají počet sloupců, které chcete použít, z možných 12 na řádek. Pokud tedy chcete mít tři sloupce stejné šířky napříč, můžete použít .col-4.
Sloupce widthjsou nastaveny v procentech, takže jsou vždy proměnlivé a mají velikost vzhledem k jejich nadřazenému prvku.
Sloupce jsou horizontální padding, aby se vytvořily okapy mezi jednotlivými sloupci, ale můžete je odstranit marginz řad a paddingze sloupců .no-gutterspomocí .row.
Aby mřížka reagovala, existuje pět bodů přerušení mřížky, jeden pro každý citlivý bod přerušení : všechny body přerušení (extra malé), malé, střední, velké a extra velké.
Zarážky mřížky jsou založeny na dotazech na minimální šířku média, což znamená, že se vztahují na tento jeden bod přerušení a všechny nad ním (např. .col-sm-4platí pro malá, střední, velká a extra velká zařízení, ale ne pro první xsbod přerušení).
Pro sémantické označení můžete použít předdefinované třídy mřížky (jako .col-4) nebo mixiny Sass .

Buďte si vědomi omezení a chyb kolem flexboxu , jako je nemožnost použít některé HTML elementy jako flex kontejnery .

Možnosti mřížky

Zatímco Bootstrap používá ems nebo rems pro definování většiny velikostí, pxs se používají pro zarážky mřížky a šířky kontejneru. Je to proto, že šířka výřezu je v pixelech a nemění se s velikostí písma .

Podívejte se, jak aspekty systému Bootstrap grid fungují na více zařízeních pomocí praktické tabulky.

	Extra malý <576px	Malý ≥576 pixelů	Střední ≥768 pixelů	Velké ≥992 pixelů	Extra velký ≥1200px
Maximální šířka kontejneru	Žádné (automaticky)	540 pixelů	720 pixelů	960 pixelů	1140 pixelů
Předpona třídy	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
počet sloupců	12
Šířka okapu	30px (15px na každé straně sloupce)
Vnořitelný	Ano
Uspořádání sloupců	Ano

Automatické rozložení sloupců

Využijte třídy sloupců specifické pro bod přerušení pro snadné určování velikosti sloupců bez explicitní číslované třídy, jako je .col-sm-6.

Stejná šířka

Zde jsou například dvě rozvržení mřížky, která platí pro každé zařízení a výřez, od xsdo xl. Přidejte libovolný počet tříd bez jednotek pro každý bod přerušení, který potřebujete, a každý sloupec bude mít stejnou šířku.

1 ze 2

2 ze 2

1 ze 3

2 ze 3

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

Víceřádkový stejně široký

Vytvořte sloupce stejné šířky, které se klenou nad více řádky, vložením a .w-100tam, kde chcete, aby se sloupce zalomily na nový řádek. Zajistěte, aby byly přestávky responzivní smícháním .w-100s některými responzivními zobrazovacími nástroji .

Vyskytla se chyba Safari flexbox , která zabránila tomu, aby to fungovalo bez explicitního flex-basisnebo border. Existují zástupná řešení pro starší verze prohlížečů, ale neměla by být nutná, pokud vaše cílové prohlížeče nespadají do chybných verzí.

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>

Nastavení šířky jednoho sloupce

Automatické rozvržení pro sloupce mřížky flexbox také znamená, že můžete nastavit šířku jednoho sloupce a nechat kolem něj automaticky měnit velikost sourozeneckých sloupců. Můžete použít předdefinované třídy mřížky (jak je znázorněno níže), mixy mřížky nebo šířky řádků. Všimněte si, že velikost ostatních sloupců se změní bez ohledu na šířku středového sloupce.

1 ze 3

2 ze 3 (širší)

3 ze 3

1 ze 3

2 ze 3 (širší)

3 ze 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 proměnlivé šířky

Pomocí col-{breakpoint}-autotříd upravte velikost sloupců na základě přirozené šířky jejich obsahu.

1 ze 3

Obsah proměnlivé šířky

3 ze 3

1 ze 3

Obsah proměnlivé šířky

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

Responzivní třídy

Mřížka Bootstrapu obsahuje pět vrstev předdefinovaných tříd pro vytváření komplexních responzivních rozvržení. Přizpůsobte si velikost sloupců na extra malých, malých, středních, velkých nebo extra velkých zařízeních, jak uznáte za vhodné.

Všechny body zlomu

Pro mřížky, které jsou stejné od nejmenšího zařízení po největší, použijte třídy .cola .col-*. Zadejte očíslovanou třídu, když potřebujete sloupec zvláště velké velikosti; jinak se klidně držte .col.

kol

sloupek-8

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

Naskládané do vodorovné polohy

Pomocí jediné sady .col-sm-*tříd můžete vytvořit základní mřížkový systém, který začíná skládaný a přechází v horizontální na malý bod přerušení ( 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>

Míchejte a spojujte

Nechcete, aby se vaše sloupce jednoduše skládaly do několika vrstev mřížky? Podle potřeby použijte kombinaci různých tříd pro každou úroveň. Pro lepší představu, jak to celé funguje, se podívejte na příklad níže.

.col-md-8

.col-6 .col-md-4

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

Žlaby

Žlaby mohou být responzivně upraveny pomocí vycpávek specifických pro bod přerušení a tříd užitečnosti záporné marže. Chcete-li změnit okapy v daném řádku, spárujte obslužný program pro zápornou marži na .rowa odpovídající obslužné programy výplně na .cols. Je možné, že bude nutné upravit .containeri .container-fluidnadřazený prvek, aby se zabránilo nechtěnému přetečení, a to pomocí znovu odpovídající utility padding.

Zde je příklad přizpůsobení mřížky Bootstrap u velkého lgbodu přerušení ( ) a výše. Zvýšili jsme .colvýplň pomocí .px-lg-5, vyrovnali jsme tomu pomocí .mx-lg-n5na nadřazeném prvku .rowa poté upravili .containerobal pomocí .px-lg-5.

Vlastní výplň sloupců

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

Řádkové sloupce

Pomocí responzivních .row-cols-*tříd můžete rychle nastavit počet sloupců, které nejlépe vykreslí váš obsah a rozvržení. Zatímco normální .col-*třídy se vztahují na jednotlivé sloupce (např. .col-md-4), třídy řádkových sloupců jsou nastaveny na nadřazeném prvku .rowjako zkratka.

Pomocí těchto tříd sloupců řádků můžete rychle vytvořit základní rozvržení mřížky nebo ovládat rozvržení karet.

Sloupec

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

Sloupec

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

Sloupec

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

Sloupec

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

Sloupec

<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 také použít doprovodný 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);
  }
}

Zarovnání

Pro svislé a vodorovné zarovnání sloupců použijte nástroje pro zarovnání flexboxu. Internet Explorer 10-11 nepodporuje vertikální zarovnání položek Flex, pokud má kontejner Flex, min-heightjak je znázorněno níže. Další podrobnosti viz Flexbugs #3.

Vertikální zarovnání

Jeden ze tří sloupců

<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 ze tří sloupců

<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ální zarovnání

Jeden ze dvou sloupců

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

Žádné okapy

Žlaby mezi sloupy v našich předdefinovaných třídách mřížky lze odstranit pomocí .no-gutters. Tím se odstraní záporné margins .rowa vodorovné paddingze všech přímých podřízených sloupců.

Zde je zdrojový kód pro vytváření těchto stylů. Všimněte si, že přepsání sloupců jsou omezena pouze na první podřízené sloupce a jsou cílena prostřednictvím selektoru atributů . I když to generuje specifičtější selektor, výplň sloupců lze ještě dále přizpůsobit pomocí nástrojů pro nastavení mezer .

Potřebujete design od okraje k okraji? Pusťte rodič .containernebo .container-fluid.

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

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

V praxi to vypadá takto. Všimněte si, že to můžete i nadále používat se všemi ostatními předdefinovanými třídami mřížky (včetně šířek sloupců, responzivních vrstev, změn pořadí a další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>

Obtékání sloupů

Pokud je v jednom řádku umístěno více než 12 sloupců, každá skupina nadbytečných sloupců se jako jedna jednotka zalomí do nového řádku.

.col-9

.col-4
Protože 9 + 4 = 13 > 12, tento 4sloupcový div se zabalí do nového řádku jako jedna souvislá jednotka.

.col-6
Následující sloupce pokračují podél nového řádku.

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

Sloupce se zlomí

Rozdělení sloupců na nový řádek ve flexboxu vyžaduje malý hack: přidejte prvek s width: 100%kdekoli, kde chcete zalomit sloupce do nového řádku. Normálně je toho dosaženo s násobkem .rows, ale ne každá metoda implementace to může vysvětlovat.

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

Tuto přestávku můžete také použít v určitých bodech přerušení pomocí našich responzivních zobrazovacích nástrojů .

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

Změna pořadí

Objednat třídy

Použijte .order-třídy pro ovládání vizuálního pořadí vašeho obsahu. Tyto třídy jsou responzivní, takže můžete nastavit orderbod přerušení (např. .order-1.order-md-2). Zahrnuje podporu pro 1přes 12všech pět vrstev mřížky.

Nejprve v DOM, žádná objednávka nebyla použita

Druhý v DOM, s větší objednávkou

Třetí v DOM, s pořadí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í také responzivní třídy .order-firsta .order-lasttřídy, které mění orderelement použitím order: -1a order: 13( order: $columns + 1). Tyto třídy lze také podle potřeby kombinovat s číslovanými .order-*třídami.

První v DOM, objednáno jako poslední

Druhý v DOM, neuspořádaný

Třetí v DOM, objednáno jako první

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

Odsazení sloupků

Sloupce mřížky můžete odsadit dvěma způsoby: našimi responzivními .offset-třídami mřížky a našimi nástroji pro okraje . Třídy mřížky mají velikost tak, aby odpovídaly sloupcům, zatímco okraje jsou užitečnější pro rychlé rozvržení, kde je šířka odsazení proměnná.

Offsetové třídy

Přesunout sloupce doprava pomocí .offset-md-*tříd. Tyto třídy zvětšují levý okraj sloupce o *sloupce. Například .offset-md-4přesune .col-md-4přes čtyři sloupce.

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

Kromě vymazání sloupců v responzivních zarážkách může být nutné resetovat posuny. Podívejte se na to v akci v příkladu mříž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>

Maržové nástroje

S přechodem na flexbox ve verzi 4 můžete použít nástroje pro okraje, jako .mr-autoje vynucení sourozeneckých sloupců od sebe.

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

Hnízdění

Chcete-li obsah vnořit do výchozí mřížky, přidejte do existujícího sloupce nový .rowa sadu sloupců . Vnořené řádky by měly obsahovat sadu sloupců, jejichž celkový počet je 12 nebo méně (není nutné použít všech 12 dostupných sloupců)..col-sm-*.col-sm-*

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

Když používáte zdrojové soubory Sass Bootstrapu, máte možnost použít proměnné a mixiny Sass k vytvoření vlastních, sémantických a responzivních rozvržení stránky. Naše předdefinované třídy mřížky používají stejné proměnné a mixiny, aby poskytovaly celou sadu tříd připravených k použití pro rychle reagující rozvržení.

Proměnné

Proměnné a mapy určují počet sloupců, šířku mezery a bod dotazu na média, ve kterém mají začít plovoucí sloupce. Používáme je ke generování předdefinovaných tříd mřížky zdokumentovaných výše, stejně jako pro vlastní mixiny uvedené níže.

$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 se používají ve spojení s proměnnými mřížky ke generování sémantických CSS pro jednotlivé sloupce mříž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);

Příklad použití

Proměnné můžete upravit na své vlastní hodnoty, nebo jen použít mixiny s jejich výchozími hodnotami. Zde je příklad použití výchozího nastavení k vytvoření rozvržení se dvěma sloupci s mezerou mezi 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ární 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>

Přizpůsobení mřížky

Pomocí našich vestavěných proměnných a map Sass mřížky je možné zcela přizpůsobit předdefinované třídy mřížky. Změňte počet vrstev, rozměry dotazu na média a šířky kontejneru – poté znovu zkompilujte.

Sloupy a okapy

Počet sloupců mřížky lze upravit pomocí proměnných Sass. $grid-columnsse používá ke generování šířek (v procentech) každého jednotlivého sloupce a zároveň $grid-gutter-widthnastavuje šířku okapů sloupců.

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

Vrstvy mřížky

Pokud se přesunete za samotné sloupce, můžete také upravit počet vrstev mřížky. Pokud byste chtěli pouze čtyři úrovně mřížky, aktualizovali byste $grid-breakpointsa $container-max-widthsna něco takového:

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

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

Při provádění jakýchkoli změn v proměnných nebo mapách Sass budete muset změny uložit a znovu zkompilovat. Pokud tak učiníte, bude výstupem zcela nová sada předdefinovaných tříd mřížky pro šířky sloupců, odsazení a řazení. Budou také aktualizovány nástroje pro responzivní viditelnost, aby mohly používat vlastní zarážky. Nezapomeňte nastavit hodnoty mřížky v px(nikoli rem, em, nebo %).