Misalai na grid Bootstrap

Tsarin grid na asali don fahimtar da ku game da gini a cikin tsarin grid na Bootstrap.

A cikin waɗannan misalan .themed-grid-colana ƙara ajin zuwa ginshiƙai don ƙara wasu jigo. Wannan ba aji bane da ake samu a Bootstrap ta tsohuwa.

Matakan grid biyar

Akwai matakai biyar zuwa tsarin grid na Bootstrap, ɗaya ga kowane kewayon na'urorin da muke tallafawa. Kowane matakin yana farawa a ƙaramin girman kallon kallo kuma yana aiki ta atomatik zuwa manyan na'urori sai dai idan an soke su.

.kol-4

.kol-sm-4

.col-md-4

.col-lg-4

.kol-xl-4

.kol-xxl-4

ginshiƙai guda uku daidai

Samu ginshiƙai masu faɗi daidai guda uku suna farawa daga kwamfutoci da sikeli zuwa manyan kwamfutoci . A kan na'urorin hannu, allunan da ƙasa, ginshiƙan za su tara ta atomatik.

.col-md-4

Madaidaicin ginshiƙai guda uku

Ta amfani da .row-cols-*azuzuwan, zaka iya ƙirƙirar grid cikin sauƙi tare da ginshiƙai daidai.

.colyaro na .row-cols-md-3

ginshiƙai uku marasa daidaituwa

Samo ginshiƙai guda uku waɗanda ke farawa daga tebur da kuma yin sikeli zuwa manyan kwamfutoci masu faɗi daban-daban. Ka tuna, ginshiƙan grid yakamata su ƙara har zuwa goma sha biyu don toshe ɗaya a kwance. Fiye da haka, kuma ginshiƙai suna fara tarawa komai wurin kallo.

.col-md-3

.col-md-6

.col-md-3

ginshiƙai biyu

Samu ginshiƙai guda biyu suna farawa daga tebur kuma suna yin sikeli zuwa manyan kwamfutoci .

.col-md-8

.col-md-4

Cikakken faɗi, ginshiƙi ɗaya

Babu azuzuwan grid da ya zama dole don abubuwa masu faɗin cikakkun bayanai.

ginshiƙai biyu tare da ginshiƙai guda biyu

Bisa ga takaddun, gida yana da sauƙi-kawai sanya jere na ginshiƙai a cikin ginshiƙi mai wanzuwa. Wannan yana ba ku ginshiƙai guda biyu waɗanda ke farawa daga kwamfutoci da ƙira zuwa manyan kwamfutoci , tare da wani biyu (daidai nisa) a cikin babban ginshiƙi.

A girman na'urar hannu, allunan da ƙasa, waɗannan ginshiƙai da ginshiƙansu za su tara.

.col-md-8

.col-md-6

.col-md-4

Mixed: wayar hannu da tebur

Tsarin grid na Bootstrap v5 yana da matakai shida na azuzuwa: xs (ƙarin ƙarami, ba a amfani da wannan infix ɗin aji), sm (ƙananan), md (matsakaici), lg (babba), xl (x-large), da xxl (xx). - babba). Kuna iya amfani da kusan kowane haɗuwa na waɗannan azuzuwan don ƙirƙirar ƙarin shimfidu masu ƙarfi da sassauƙa.

Kowane matakin azuzuwan yana haɓaka sama, ma'ana idan kun shirya saita faɗin faɗin md, lg, xl da xxl, kawai kuna buƙatar saka md.

.col-md-8

.col-6 .col-md-4

.kol-6

Mixed: wayar hannu, kwamfutar hannu, da tebur

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Gutters

Tare da .gx-*azuzuwan, ana iya daidaita gutters a kwance.

.coltare da .gx-4gutters

Yi amfani da .gy-*azuzuwan don sarrafa magudanar ruwa a tsaye.

.coltare da .gy-4gutters

Tare da .g-*azuzuwan, ana iya daidaita gutters a bangarorin biyu.

.coltare da .g-3gutters

Kwantena

Ƙarin azuzuwan da aka ƙara a cikin Bootstrap v4.4 suna ba da damar kwantena waɗanda ke da faɗin 100% har zuwa wani wuri na musamman. v5 yana ƙara sabon wuri xxl.

.kwantena

.kwantena-sm

.kwantena-md

.kwantena-lg

.kwantena-xl

.kwantena-xxl

.kwantena-ruwa