Príklady zavádzacej mriežky

Základné rozloženia mriežky, aby ste sa zoznámili s budovaním v rámci mriežkového systému Bootstrap.

Tri rovnaké stĺpce

Získajte tri stĺpce rovnakej šírky, začínajúce na stolných počítačoch a škálovateľné na veľké stolové počítače . Na mobilných zariadeniach, tabletoch a nižšie sa stĺpce automaticky uložia.

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

Tri nerovnaké stĺpce

Získajte tri stĺpce začínajúce na stolných počítačoch a škálovateľné na veľké plochy rôznych šírok. Pamätajte, že počet stĺpcov mriežky by mal byť až dvanásť pre jeden horizontálny blok. Viac než to a stĺpce sa začnú ukladať bez ohľadu na výrez.

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

Dva stĺpce

Získajte dva stĺpce začínajúce na stolných počítačoch a škálovateľné na veľké stolové počítače .

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

Plná šírka, jeden stĺpec

Pre prvky s plnou šírkou nie sú potrebné žiadne triedy mriežky.

Dva stĺpce s dvoma vnorenými stĺpcami

Podľa dokumentácie je vnorenie jednoduché – stačí vložiť riadok stĺpcov do existujúceho stĺpca. Získate tak dva stĺpce začínajúce na stolných počítačoch a škálovateľné na veľké stolové počítače , pričom ďalšie dva (rovnaké šírky) sú vo väčšom stĺpci.

Pri veľkostiach mobilných zariadení, tabletoch a nižších verziách sa tieto stĺpce a ich vnorené stĺpce budú ukladať.

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

Zmiešané: mobilné a stolné počítače

Gridový systém Bootstrap 3 má štyri úrovne tried: xs (telefóny), sm (tablety), md (stolné počítače) a lg (väčšie stolné počítače). Na vytvorenie dynamickejších a flexibilnejších rozložení môžete použiť takmer akúkoľvek kombináciu týchto tried.

Každá vrstva tried sa zväčšuje, čo znamená, že ak plánujete nastaviť rovnaké šírky pre xs a sm, stačí zadať 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

Zmiešané: 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

Čistenie stĺpcov

Vyčistite plávajúce v špecifických bodoch prerušenia, aby ste predišli nepríjemnému zabaleniu s nerovnomerným obsahom.

.col-xs-6 .col-sm-3
Zmeňte veľkosť výrezu alebo si ho pozrite napríklad v telefóne.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Obnovenie posunu, tlače a ťahu

Resetujte offsety, push a pulls v špecifických bodoch prerušenia.

.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