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.

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

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.

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

Sloupce o stejné šířce lze rozdělit na více řádků, ale vyskytla se chyba flexboxu Safari , která zabránila tomu, aby to fungovalo bez explicitního flex-basisnebo border. Pro starší verze prohlížečů existují zástupná řešení, ale pokud máte aktuální verzi, neměla by být nutná.

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

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.

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

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

Víceřadá stejně široká

Vytvořte sloupce o stejné šířce, které se rozprostírají přes více řádků, 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 .

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

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.

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

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

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

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.

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

Zarovnání

Pro svislé a vodorovné zarovnání sloupců použijte nástroje pro zarovnání flexboxu.

Vertikální zarovnání

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

Horizontální zarovnání

<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? Zahoď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).

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

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.

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

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.

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

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

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

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.

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

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

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.

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

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 .

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

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.

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

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

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

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 {
  width: 800px;
  @include make-container();
}

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

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