1. Styly

Mřížka

angl. Grid

Slouží k rozmístění elementů na stránce.

Pro rozmístění obsahu na stránce využíváme mřížku z frameworku Bootstrap 4, kde se dočtete více podrobností o použití mřížky. Využíváme standardní 12 sloupcovou mřížku, pouze je zvětšeno odsazení mezi sloupci (tzv. gutter) na 60px.

Velikost prostoru pro sloupce se liší na použitém typu kontejneru. Je možné použít .container, který má definovanou velikost pro každý typ zařízení, nebo .container-fluid, který vždy využívá 100% šířku obrazovky. Rozměry pro .container jsou následující:

Typ zařízení Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
Prefix v CSS .col- .col-sm- .col-md- .col-lg- .col-xl-
Velikost kontejneru Dle šířky obrazovky 540px 620px 960px 1140px

Ukázka mřížku pro zařízení velikost Extra large

Použití mřížky

Mřížka umožňuje:

  • Automatické velikosti sloupců bez explicitního uvedení rozměrů .col. Více
  • Nastavení velikosti sloupců pro konkrétní velikost zařízení .col-{zařízení}-{počet-sloupců}. Více
  • Vertikální a horizontální zarovnání sloupců. Více
  • Změny pořadí zobrazení sloupců pomocí .order-. Více
  • Odsazování sloupců pomocí .offset-{zařízení}-{počet-sloupců}. Více

Příklad použití

<div class="container">
    <div class="row">
        <!-- Jednosloupcové rozložení pro malá zařízení a 3-sloupcové rozložení pro zařízení s šířkou ≥768px -->
        <div class="col">
            <!-- Levý sloupec -->
        </div>
        <div class=col-md-6">
            <!-- Střední sloupec-->
        </div>
        <div class="col">
            <!-- Pravý sloupec -->
        </div>
    </div>
</div>

Odsazování elementů

Jako základní jednotku pro odsazování elementu využíváme 15pixelovou mezeru a její násobky. Pro kodéry jsou k dispozici doplňkové CSS třídy, které pomohou s odsazováním elementů pro jednotlivá rozlišení.