Bootstrap sarearen adibideak
Oinarrizko sareta-diseinuak Bootstrap sare-sistemaren barruan eraikitzen ezagutarazteko.
Adibide hauetan .themed-grid-col
klasea 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.
Hiru zutabe berdin
Lortu zabalera berdineko hiru zutabe mahaigainetatik hasi eta mahaigain handietara eskalatu . Gailu mugikorretan, tabletetan eta azpian, zutabeak automatikoki pilatuko dira.
Hiru zutabe berdinen alternatiba
Klaseak erabiliz, .row-cols-*
erraz sor dezakezu zutabe berdinekin sareta.
.col
ren umea
.row-cols-md-3
.col
ren umea
.row-cols-md-3
.col
ren umea
.row-cols-md-3
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.
Bi zutabe
Lortu bi zutabe mahaigainetatik hasi eta mahaigain handietara eskalatu .
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.
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.
Mistoa: mugikorra, tableta eta mahaigaina
Erretenak
Klaseekin .gx-*
, kanalizazio horizontalak egokitu daitezke.
.col
.gx-4
erretenekin
_
.col
.gx-4
erretenekin
_
.col
.gx-4
erretenekin
_
.col
.gx-4
erretenekin
_
.col
.gx-4
erretenekin
_
.col
.gx-4
erretenekin
_
Erabili .gy-*
klaseak kanalizazio bertikalak kontrolatzeko.
.col
.gy-4
erretenekin
_
.col
.gy-4
erretenekin
_
.col
.gy-4
erretenekin
_
.col
.gy-4
erretenekin
_
.col
.gy-4
erretenekin
_
.col
.gy-4
erretenekin
_
Klaseekin .g-*
, bi noranzkoetan erretenak egokitu daitezke.
.col
.g-3
erretenekin
_
.col
.g-3
erretenekin
_
.col
.g-3
erretenekin
_
.col
.g-3
erretenekin
_
.col
.g-3
erretenekin
_
.col
.g-3
erretenekin
_
Ontziak
Bootstrap v4.4-n gehitutako klase gehigarriek eten puntu jakin batera arte % 100 zabaleko edukiontziak onartzen dituzte. xxl
v5-ek eten puntu berri bat gehitzen du .