Bootstrap sarearen adibideak

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

Adibide hauetan .themed-grid-colklasea zutabeetara gehitzen da gaia gehitzeko. Hau ez da Bootstrap-en lehenespenez eskuragarri dagoen klase bat.

Bost sare-maila

Bootstrap sare sisteman bost maila daude, onartzen ditugun gailu sorta bakoitzeko bat. Maila bakoitza gutxieneko bistaratze-tamaina batean hasten da eta automatikoki aplikatzen da gailu handiagoetan, gainidatzi ezean.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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 v4 sare-sistemak bost klase maila ditu: xs (txikia), sm (txikia), md (ertaina), lg (handia) eta xl (handia). 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-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mistoa: mugikorra, tableta eta mahaigaina

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