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

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.

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

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.

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

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

Viacradový rovnako široký

Vytvorte stĺpce rovnakej šírky, ktoré sa rozprestierajú vo viacerých riadkoch, vložením písmena a .w-100tam, kde chcete, aby sa stĺpce zalomili na nový riadok. Zabezpečte, aby prestávky reagovali zmiešaním .w-100s 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>

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.

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

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

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

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.

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

Zarovnanie

Na vertikálne a horizontálne zarovnanie stĺpcov použite nástroje na zarovnanie flexboxu.

Vertikálne zarovnanie

<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álne zarovnanie

<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. Toto odstráni záporné margins .rowa horizontálne 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).

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

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.

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

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

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

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.

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

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

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.

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

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.

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

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

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

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