Tusaalooyinka xajinta bootstrap

Nashqadaynta shabakadaha aasaasiga ah si aad u barato dhismaha gudaha nidaamka xariijimaha Bootstrap.

Tusaalooyinkan .themed-grid-colfasalka waxaa lagu daraa tiirarka si loogu daro mawduucyo. Kani maaha fasal si caadi ah loogu heli karo Bootstrap.

Shan heerar grid

Waxa jira shan heerar oo ah nidaamka grid Bootstrap, mid ka mid ah qalab kasta oo kala duwan oo aanu taageerno. Heer kastaa wuxuu ka bilaabmaa ugu yaraan cabbirka daawashada wuxuuna si toos ah u quseeyaa aaladaha waaweyn ilaa aan la dhaafin.

.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

Saddex tiir oo siman

Hel saddex tiir oo ballac siman oo ka bilaabma msktop-yada oo aad u miisaamayso msktop-yada waaweyn . Aaladaha moobilka, tablet-yada iyo kuwa ka hooseeya, tiirarka ayaa si toos ah u dul-saaran doona.

.col-md-4
.col-md-4
.col-md-4

Saddex tiir oo siman oo beddel ah

Isticmaalka .row-cols-*fasallada, waxaad si fudud u abuuri kartaa shabag leh tiirar siman.

.colilma .row-cols-md-3
.colilma .row-cols-md-3
.colilma .row-cols-md-3

Saddex tiir oo aan sinnayn

Hel saddex tiir oo ka bilaabma msktop-yada oo aad miisaanto miisaska waaweyn ee ballacyada kala duwan leh. Xusuusnow, tiirarka xajmigu waa in ay ku daraan ilaa laba iyo toban goobood oo siman. In ka badan intaas, tiirarkuna waxay bilaabaan is-dul-saarid iyada oo aan loo eegin meesha la eegayo.

.col-md-3
.col-md-6
.col-md-3

Laba tiir

Soo hel laba tiir oo ka bilaabma msktop-yada oo aad u miisaamayso miisaska waaweyn .

.col-md-8
.col-md-4

Balaadh buuxa, tiir keliya

Ma jiro fasalo xajmiyeed ah oo lagama maarmaan u ah walxaha ballaca buuxa.

Laba tiir oo leh laba tiir oo buul leh

Sida ku cad dukumeenti, buul-ku-dhigiddu waa sahlan tahay-kaliya geli saf safaf ah gudaha tiir jira. Tani waxay ku siinaysaa laba tiir oo ka bilaabma msktop-yada oo aad u miisaamayso miisaska waaweyn , oo leh laba kale (ballac siman) oo ku dhex jira tiirka weyn.

Xajmiga aaladaha moobilka, tablet-yada iyo hoosba, tiirarkan iyo tiirarkooda buulka leh ayaa is dul fuuli doona.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Isku dhafan: mobilada iyo miiska

Nidaamka grid Bootstrap v5 wuxuu leeyahay lix heerar oo fasalo ah: xs (dheeraad ah, fasalkan infix lama isticmaalo), sm (yar), md (dhexdhexaad), lg (weyn), xl (x-weyn), iyo xxl (xx). -weyn). Waxaad isticmaali kartaa ku dhawaad ​​isku-dar kasta oo ka mid ah fasaladan si aad u abuurto qaabayn firfircoon oo dabacsan.

Heer kasta oo fasallo ah ayaa kor u kacaya, taasoo la macno ah haddii aad qorshaynayso inaad dejiso balac isku mid ah md, lg, xl iyo xxl, waxaad u baahan tahay oo keliya inaad qeexdo md.

.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

Isku dhafan: mobilada, tablet-ka, iyo miiska

.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

Gutters

Fasallada, majaraha .gx-*jiifka ah waa la hagaajin karaa.

.col.gx-4biyo- mareenno leh
.col.gx-4biyo- mareenno leh
.col.gx-4biyo- mareenno leh
.col.gx-4biyo- mareenno leh
.col.gx-4biyo- mareenno leh
.col.gx-4biyo- mareenno leh

Isticmaal .gy-*fasalada si aad u xakamayso majaraha toosan.

.col.gy-4biyo- mareenno leh
.col.gy-4biyo- mareenno leh
.col.gy-4biyo- mareenno leh
.col.gy-4biyo- mareenno leh
.col.gy-4biyo- mareenno leh
.col.gy-4biyo- mareenno leh

Fasallada, majaraha .g-*labada dhinac waa la hagaajin karaa.

.col.g-3biyo- mareenno leh
.col.g-3biyo- mareenno leh
.col.g-3biyo- mareenno leh
.col.g-3biyo- mareenno leh
.col.g-3biyo- mareenno leh
.col.g-3biyo- mareenno leh

Konteenarada

Fasalo dheeri ah oo lagu daray Bootstrap v4.4 ayaa u oggolaanaya weelasha 100% balacsan ilaa meel gaar ah. v5 waxay ku daraysaa meel cusub xxl.

.koonteenar
.container-sm
.koonteenar-md
.koonteenar-lg
.koonteenar-xl
.koonteenar-xxl
.koonteener- dareere