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
.col-xxl-4
.col-xxl-4
.col-xxl-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 berdinen alternatiba

Klaseak erabiliz, .row-cols-*erraz sor dezakezu zutabe berdinekin sareta.

.colren umea .row-cols-md-3
.colren umea .row-cols-md-3
.colren 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.

.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 v5 sareta sistemak sei klase maila ditu: xs (txikia, klase infix hau ez da erabiltzen), sm (txikia), md (ertaina), lg (handia), xl (x-handia) eta xxl (xx). -handiak). Klase hauen ia edozein konbinazio erabil dezakezu diseinu dinamikoagoak eta malguagoak sortzeko.

Klase-maila bakoitza eskalatzen da, hau da, md, lg, xl eta xxl-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

Erretenak

Klaseekin .gx-*, kanalizazio horizontalak egokitu daitezke.

.col.gx-4erretenekin _
.col.gx-4erretenekin _
.col.gx-4erretenekin _
.col.gx-4erretenekin _
.col.gx-4erretenekin _
.col.gx-4erretenekin _

Erabili .gy-*klaseak kanalizazio bertikalak kontrolatzeko.

.col.gy-4erretenekin _
.col.gy-4erretenekin _
.col.gy-4erretenekin _
.col.gy-4erretenekin _
.col.gy-4erretenekin _
.col.gy-4erretenekin _

Klaseekin .g-*, bi noranzkoetan erretenak egokitu daitezke.

.col.g-3erretenekin _
.col.g-3erretenekin _
.col.g-3erretenekin _
.col.g-3erretenekin _
.col.g-3erretenekin _
.col.g-3erretenekin _

Ontziak

Bootstrap v4.4-n gehitutako klase gehigarriek eten puntu jakin batera arte % 100 zabaleko edukiontziak onartzen dituzte. xxlv5-ek eten puntu berri bat gehitzen du .

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