Bootstrap sarearen adibideak

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

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, klase infixa hau ez da erabiltzen), 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, md, lg eta xl-en zabalera berdinak ezartzeko asmoa baduzu, md bakarrik zehaztu behar duzu.

.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-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

Ontziak

Bootstrap v4.4-n gehitutako klase gehigarriek eten-puntu jakin batera arte %100 zabaleko edukiontziak onartzen dituzte.

.edukiontzia
.edukiontzi-sm
.edukiontzi-md
.edukiontzi-lg
.edukiontzi-xl
.edukiontzi-likidoa