Mriežkový systém

Príklad

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 podrobné vysvetlenie toho, ako sa mriežkový systém spája.

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

Vyššie uvedený príklad vytvára tri stĺpce rovnakej šírky naprieč všetkými zariadeniami a výrezmi pomocou našich preddefinovaných tried mriežky. Tieto stĺpce sú vycentrované na stránke s nadradeným .container.

Ako to funguje

Keď to rozoberieme, takto sa mriežkový systém spája:

• Naša mriežka podporuje šesť citlivých bodov prerušenia . Body prerušenia sú založené na min-widthmediálnych dopytoch, čo znamená, že ovplyvňujú daný bod prerušenia a všetky nad ním (napr. .col-sm-4platí pre sm, md, lg, xla xxl). To znamená, že môžete ovládať veľkosť a správanie kontajnera a stĺpca podľa každého bodu prerušenia.

• Kontajnery vycentrujú a vodorovne podložia obsah. Použite .containerpre responzívnu šírku pixelov, .container-fluidpre width: 100%všetky zobrazovacie polia a zariadenia, alebo responzívny kontajner (napr. .container-md) pre kombináciu šírky plynu a pixelov.

• 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á s riadkami so zápornými okrajmi, aby sa zabezpečilo, že obsah vo vašich stĺpcoch bude vizuálne zarovnaný na ľavej strane. Riadky tiež podporujú triedy modifikátorov na jednotné uplatňovanie veľkosti stĺpcov a triedy medzier na zmenu medzier obsahu.

• Stĺpce sú neuveriteľne flexibilné. V každom riadku je k dispozícii 12 stĺpcov šablóny, čo vám umožňuje vytvárať rôzne kombinácie prvkov, ktoré zahŕňajú ľubovoľný počet stĺpcov. Triedy stĺpcov označujú počet stĺpcov šablóny, ktoré sa majú preklenúť (napr. col-4rozsahy štyri). widths sú nastavené v percentách, takže máte vždy rovnakú relatívnu veľkosť.

• Odkvapy sú tiež citlivé a prispôsobiteľné. Triedy odkvapov sú dostupné naprieč všetkými bodmi prerušenia so všetkými rovnakými veľkosťami ako naše okraje a rozstupy . Zmeňte vodorovné odkvapy pomocou .gx-*tried, zvislé odkvapy pomocou .gy-*alebo všetky odkvapy pomocou .g-*tried. .g-0je k dispozícii aj na odstránenie odkvapov.

• Sass premenné, mapy a mixiny poháňajú sieť. Ak nechcete používať preddefinované triedy mriežky v Bootstrape, môžete použiť zdroj Sass našej mriežky na vytvorenie vlastnej so sémantickejším označením. Zahŕňame aj niektoré vlastné vlastnosti CSS, ktoré využívajú tieto premenné Sass pre ešte väčšiu flexibilitu pre vás.

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

Mriežkový systém Bootstrapu sa dokáže prispôsobiť všetkým šiestim predvoleným bodom prerušenia a akýmkoľvek bodom prerušenia, ktoré si prispôsobíte. Šesť predvolených úrovní mriežky je nasledujúcich:

• Extra malý (xs)
• malé (sm)
• Stredná (md)
• veľké (lg)
• Extra veľké (xl)
• Extra extra veľké (xxl)

Ako je uvedené vyššie, každý z týchto bodov prerušenia má svoj vlastný kontajner, jedinečnú predponu triedy a modifikátory. Tu je návod, ako sa mriežka mení v týchto prerušovacích bodoch:

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

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>

Responzívne triedy

Mriežka Bootstrapu obsahuje šesť ú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="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).

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

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

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 .row-cols-automôžete dať stĺpcom ich prirodzenú šírku.

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

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

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

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

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

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

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