Bootstrap sarearen adibideak

Oinarrizko sareta-diseinuak Bootstrap sare-sistemaren barruan eraikitzen ezagutarazteko.

Hiru zutabe berdin

Lortu zabalera berdineko hiru zutabe mahaigainetatik hasi eta mahaigain handietara eskalatu . Gailu mugikorretan, tabletetan eta azpian, zutabeak automatikoki pilatuko dira.

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

Hiru zutabe desberdin

Lortu hiru zutabe mahaigainetatik hasi eta zabalera ezberdinetako mahaigain handietara eskalatu . Gogoratu, sareta-zutabeek hamabi gehitu behar dituztela bloke horizontal bakarrerako. Hori baino gehiago, eta zutabeak pilatzen hasten dira ikuspegia edozein dela ere.

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

Bi zutabe

Lortu bi zutabe mahaigainetatik hasi eta mahaigain handietara eskalatu .

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

Zabalera osoa, zutabe bakarra

Ez da sareta-klaserik behar zabalera osoko elementuetarako.

Bi zutabe bi zutabe habiaratuekin

Dokumentazioaren arabera, habia egitea erraza da: jarri zutabe-ilara bat lehendik dagoen zutabe baten barruan. Honek bi zutabe ematen dizkizu mahaigainetik hasi eta mahaigain handietara eskalatzeko , beste bi (zabalera berdinak) zutabe handiagoaren barruan.

Gailu mugikorren tamainan, tabletetan eta beherantzean, zutabe hauek eta habiatutako zutabeak pilatuko dira.

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

Mistoa: mugikorra eta mahaigainekoa

Bootstrap 3 grid sistemak lau klase maila ditu: xs (telefonoak), sm (tabletak), md (mahaigainak) eta lg (mahaigain handiagoak). Klase hauen ia edozein konbinazio erabil dezakezu diseinu dinamikoagoak eta malguagoak sortzeko.

Klase maila bakoitza eskalatzen da, hau da, xs eta sm-en zabalera berdinak ezartzeko asmoa baduzu, xs bakarrik zehaztu behar duzu.

.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

Mistoa: mugikorra, tableta eta mahaigaina

.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

Zutabeen garbiketa

Garbitu flotagailuak eten-puntu zehatzetan, eduki irregularrean biltzeko traketsak saihesteko.

.col-xs-6 .col-sm-3
Aldatu zure ikuspegiaren tamaina edo begiratu zure telefonoan adibidez.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Desplazatu, bultza eta tira berrezarri

Berrezarri desplazamenduak, bultzadak eta tiraketak eten-puntu zehatzetan.

.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