Podřazené stránky:

Obtékání obrázku v CK Editoru v redakčním systému PSoIT

Využití bootstrap mřížky

Pokud chcete uspořádat obázky, texty, tabulky a pod. vedle sebe, můžete využít třídu (class) bootstrapu pro uspořádání do mřížky. Tato metoda vytváří rozložení sloupců vedle sebe. Class používáme ve značce div. Zapíšeme ho ve tvaru

<div class="col-{zkratka velikosti kontejneru}-{počet dílů z 12}">Sem váš obsah</div>

Základní tabulka se využitelnými class je níže.

Možnosti mřížky

Podívejte se, jak aspekty systému mřížky Bootstrap fungují na více zařízeních - počítač, tablet, mobil. Záchytnou informací je šířka celého displeje (max. šířka šířka kontejneru). Zkratky celikosti kontejneru jsou xs, sm, md, lg, xl (1. řádek tabulk). Převod na px je v 2. řádku tabulky. V tabulce je rovněž

  Extra malé xs
<576px
Malé sm
≥576px
Střední md
≥768px
Velké lg
≥992px
Extra velké xl
≥1200px
Max. šířka kontejneru Žádné (auto) 540px 720px 960px 1140px
Předpona třídy v divu (předpona class) .col- .col-sm- .col-md- .col-lg- .col-xl-
Celkem sloupců v kontejneru 12
Šířka okraje před a za sloupcem 15px na každé straně sloupce

Příklad

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      1 of 2
    </div>
    <div class="col-sm-6">
      2 of 2
    </div>
   </div>
   <div class="row">
    <div class="col-sm-4">
      1 of 3
    </div>
    <div class="col-sm-4">
      2 of 3
    </div>
    <div class="col-sm-4">
      3 of 3
    </div>
  </div>
</div>

Zobrazení

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3