Izibonelo zegridi ye-Bootstrap

Izakhiwo zegridi eziyisisekelo ukuze ujwayelane nokwakha ngaphakathi kwesistimu yegridi ye-Bootstrap.

Kulezi zibonelo .themed-grid-colikilasi lengezwa kumakholomu ukuze kwengezwe ingqikithi. Leli akulona ikilasi elitholakala ku-Bootstrap ngokuzenzakalelayo.

Izigaba ezinhlanu zamagridi

Kunezigaba ezinhlanu ohlelweni lwegridi ye-Bootstrap, eyodwa yohlu ngalunye lwamadivayisi esiwasekelayo. Isigaba ngasinye siqala kusayizi omncane wembobo yokubuka futhi sisebenza ngokuzenzakalelayo kumadivayisi amakhulu ngaphandle kwalapho kubhalwe ngaphezulu.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Amakholomu amathathu alinganayo

Thola amakholomu amathathu anobubanzi obulinganayo uqale kumadeskithophu futhi ulinganisele kumadeskithophu amakhulu . Kumadivayisi eselula, amathebulethi nangaphansi, amakholomu azostake ngokuzenzakalelayo.

.col-md-4

Okunye okuhlukile kwamakholomu amathathu alinganayo

Ngokusebenzisa .row-cols-*amakilasi, ungakha kalula igridi enamakholomu alinganayo.

.colingane ye .row-cols-md-3

Amakholomu amathathu angalingani

Thola amakholomu amathathu aqala kumadeskithophu bese ufinyelela kumadeskithophu amakhulu anobubanzi obuhlukahlukene. Khumbula, amakholomu egridi kufanele afinyelele eshumini nambili kubhulokhi eyodwa evundlile. Ngaphezu kwalokho, namakholomu aqala ukunqwabelana kungakhathaliseki ukuthi imbobo yokubuka.

.col-md-3

.col-md-6

.col-md-3

Amakholomu amabili

Thola amakholomu amabili aqala kumadeskithophu bese ufinyelela kumadeskithophu amakhulu .

.col-md-8

.col-md-4

Ububanzi obugcwele, ikholomu eyodwa

Awekho amakilasi egridi adingekayo kuma-elementi anobubanzi obugcwele.

Amakholomu amabili anamakholomu amabili anesidleke

Ngokwamadokhumenti, ukwenza isidleke kulula—vele ufake umugqa wamakholomu ngaphakathi kwekholomu ekhona. Lokhu kukunikeza amakholomu amabili aqala kumadeskithophu bese ufinyelela kumadeskithophu amakhulu , namanye amabili (ububanzi obulinganayo) ngaphakathi kwekholomu enkulu.

Kosayizi bedivayisi yeselula, amathebulethi naphansi, lawa makholomu namakholomu awo akhiwe azonqwabelana.

.col-md-8

.col-md-6

.col-md-4

Okuhlanganisiwe: iselula nedeskithophu

Uhlelo lwegridi ye-Bootstrap v5 lunezigaba eziyisithupha zamakilasi: xs (okuncane kakhulu, lesi sigaba se-infix asisetshenziswa), sm (okuncane), md (okumaphakathi), lg (okukhulu), xl (x-enkulu), kanye ne-xxl (xx -enkulu). Ungasebenzisa cishe noma iyiphi inhlanganisela yalezi zigaba ukuze udale izakhiwo eziguqukayo nezivumelana nezimo.

Isigaba ngasinye samakilasi siyakhuphuka, okusho ukuthi uma uhlela ukusetha ububanzi obufanayo be-md, lg, xl kanye ne-xxl, udinga kuphela ukucacisa i-md.

.col-md-8

.col-6 .col-md-4

.col-6

Okuhlanganisiwe: iselula, ithebhulethi, nedeskithophu

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Ama-Gutters

Ngamakilasi .gx-*, ama-gutters avundlile angalungiswa.

.colnama- .gx-4gutters

Sebenzisa .gy-*amakilasi ukulawula ama-gutters aqondile.

.colnama- .gy-4gutters

Ngamakilasi .g-*, ama-gutters kuzo zombili izinkomba angalungiswa.

.colnama- .g-3gutters

Izitsha

Amakilasi engeziwe engezwe ku-Bootstrap v4.4 avumela iziqukathi ezinobubanzi obungu-100% kuze kube indawo ethile yokuphumula. I-v5 ingeza i- xxlbreakpoint entsha.

.isitsha

.isitsha-sm

.container-md

.isitsha-lg

.container-xl

.container-xxl

.isitsha-uketshezi