Mřížkový systém

Příklad

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é vysvětlení toho, jak se mřížkový systém spojuje.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Výše uvedený příklad vytváří tři sloupce stejné šířky napříč všemi zařízeními a výřezy pomocí našich předdefinovaných tříd mřížky. Tyto sloupce jsou vycentrovány na stránce s nadřazeným prvkem .container.

Jak to funguje

Když to rozebereme, takto se mřížkový systém spojuje:

• Naše mřížka podporuje šest citlivých bodů přerušení . Body přerušení jsou založeny na min-widthdotazech na média, což znamená, že ovlivňují daný bod přerušení a všechny body nad ním (např. .col-sm-4platí pro sm, md, lg, xla xxl). To znamená, že můžete ovládat velikost a chování kontejneru a sloupce podle každého bodu přerušení.

• Kontejnery vycentrují a vodorovně vyplní váš obsah. Použijte .containerpro responzivní šířku pixelu, .container-fluidpro width: 100%všechna zobrazovací pole a zařízení, nebo responzivní kontejner (např. .container-md) pro kombinaci proměnlivých a pixelových šířek.

• Řá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á s řádky se zápornými okraji, aby se zajistilo, že obsah ve vašich sloupcích bude vizuálně zarovnán po levé straně. Řádky také podporují třídy modifikátorů, které jednotně aplikují velikost sloupců a třídy mezer pro změnu mezer ve vašem obsahu.

• Sloupce jsou neuvěřitelně flexibilní. V každém řádku je k dispozici 12 sloupců šablony, což vám umožňuje vytvářet různé kombinace prvků, které zahrnují libovolný počet sloupců. Třídy sloupců udávají počet sloupců šablony, které mají být rozloženy (např. col-4rozpětí čtyři). widths jsou nastaveny v procentech, takže máte vždy stejnou relativní velikost.

• Žlaby jsou také citlivé a přizpůsobitelné. Třídy Gutter jsou k dispozici ve všech bodech přerušení, se všemi stejnými velikostmi, jako jsou naše okraje a mezery odsazení . Změňte vodorovné okapy pomocí .gx-*tříd, svislé okapy pomocí .gy-*nebo všechny okapy pomocí .g-*tříd. .g-0je k dispozici také pro odstranění okapů.

• Sass proměnné, mapy a mixiny napájejí síť. Pokud nechcete používat předdefinované třídy mřížky v Bootstrapu, můžete použít zdroj Sass naší mřížky a vytvořit si vlastní s více sémantickým označením. Zahrnujeme také některé vlastní vlastnosti CSS pro využití těchto proměnných Sass pro ještě větší flexibilitu pro vás.

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

Mřížkový systém Bootstrapu se může přizpůsobit všem šesti výchozím bodům přerušení a všem bodům přerušení, které si přizpůsobíte. Šest výchozích vrstev mřížky je následujících:

• Extra malý (xs)
• malé (sm)
• střední (md)
• velké (lg)
• Extra velké (xl)
• Extra extra velké (xxl)

Jak bylo uvedeno výše, každý z těchto bodů přerušení má svůj vlastní kontejner, jedinečnou předponu třídy a modifikátory. Takto se mění mřížka napříč těmito body přerušení:

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

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>

Responzivní třídy

Mřížka Bootstrapu obsahuje šest 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="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).

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

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

Řá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í .row-cols-automůžete dát sloupcům jejich přirozenou šířku.

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

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

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

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

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

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

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

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="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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

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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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);
  }
}

<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: 1.5rem !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 %).