Bootstrap Grid – Velká zařízení

Bootstrap Grid Příklad: Velká zařízení

V předchozí kapitole jsme uvedli příklad gridu s třídami pro malá a střední zařízení. Použili jsme dva div (sloupce) a dali jsme jim 25%/75% rozdělení na malá zařízení a 50%/50% rozdělení na střední zařízení:

Ale na velkých zařízeních může být design lepší jako rozdělení 33 %/66 %.

Tip: Velká zařízení jsou definována jako zařízení s šířkou obrazovky od 1200 pixelů a více .

Pro velká zařízení použijeme .col-lg-*třídy.

Nyní tedy přidáme šířky sloupců pro velká zařízení:

Nyní Bootstrap řekne "u malé velikosti se podívejte na třídy s -sm- a použijte je. Ve střední velikosti se podívejte na třídy s -md- a použijte je. Ve velké velikosti se podívejte na třídy se slovem -lg- a použijte je".

Následující příklad bude mít za následek rozdělení 25 %/75 % na malých zařízeních, 50 %/50 % rozdělení na střední zařízení a rozdělení 33 %/66 % na velká zařízení:

Použití pouze velké

V níže uvedeném příkladu pouze specifikujeme .col-lg-6třídu (bez .col-md-*a/nebo .col-sm-*). To znamená, že velká zařízení se rozdělí 50 %/50 %. U středních A malých zařízení se však bude skládat vertikálně (100% šířka):