Příklady zaváděcí mřížky

Základní rozvržení mřížky, které vás seznámí s budováním v systému mřížky Bootstrap.

Tři stejné sloupce

Získejte tři sloupce stejné šířky počínaje stolními počítači a škálovat na velké stolní počítače . Na mobilních zařízeních, tabletech a nižších verzích se sloupce automaticky skládají.

.col-md-4
.col-md-4
.col-md-4

Tři nestejné sloupce

Získejte tři sloupce počínaje stolními počítači a škálovat na velké stolní počítače různých šířek. Pamatujte, že sloupců mřížky by se mělo přidat až dvanáct pro jeden vodorovný blok. Více než to a sloupce se začnou skládat bez ohledu na výřez.

.col-md-3
.col-md-6
.col-md-3

Dva sloupce

Získejte dva sloupce počínaje stolními počítači a škálovat na velké stolní počítače .

.col-md-8
.col-md-4

Plná šířka, jeden sloupec

Pro prvky s plnou šířkou nejsou nutné žádné třídy mřížky.

Dva sloupce se dvěma vnořenými sloupci

Podle dokumentace je vnoření snadné – stačí vložit řadu sloupců do existujícího sloupce. Získáte tak dva sloupce začínající na stolních počítačích a škálovatelné na velké stolní počítače s dalšími dvěma (stejné šířky) ve větším sloupci.

U velikostí mobilních zařízení, tabletů a nižších velikostí se tyto sloupce a jejich vnořené sloupce složí.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Smíšené: mobilní a stolní

Mřížkový systém Bootstrap 3 má čtyři úrovně tříd: xs (telefony), sm (tablety), md (stolní počítače) a lg (větší stolní počítače). K vytvoření dynamičtějších a flexibilnějších rozvržení můžete použít téměř jakoukoli kombinaci těchto tříd.

Každá vrstva tříd se zvětšuje, což znamená, že pokud plánujete nastavit stejné šířky pro xs a sm, stačí zadat pouze xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Smíšené: mobil, tablet a počítač

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Vymazání sloupců

Vymažte plovoucí body na konkrétních bodech přerušení, abyste zabránili nepříjemnému zalamování s nerovnoměrným obsahem.

.col-xs-6 .col-sm-3
Změňte velikost výřezu nebo se podívejte na příklad v telefonu.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push a pull reset

Resetujte offsety, push a pulls v určitých bodech přerušení.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0