Mifano ya gridi ya bootstrap

Mipangilio ya msingi ya gridi ili kukufahamisha na ujenzi ndani ya mfumo wa gridi ya Bootstrap.

Katika mifano hii .themed-grid-coldarasa linaongezwa kwenye safu ili kuongeza mada. Hili si darasa ambalo linapatikana katika Bootstrap kwa chaguo-msingi.

Viwango vya gridi tano

Kuna viwango vitano kwa mfumo wa gridi ya Bootstrap, moja kwa kila masafa ya vifaa tunavyotumia. Kila daraja huanza katika ukubwa wa chini zaidi wa kituo cha kutazama na hutumika kiotomatiki kwa vifaa vikubwa isipokuwa kitakapobatilishwa.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Safu tatu sawa

Pata safu wima tatu za upana sawa kuanzia kwenye eneo-kazi na kuongeza eneo-kazi kubwa . Kwenye vifaa vya mkononi, kompyuta kibao na chini, safu wima zitapangwa kiotomatiki.

.col-md-4

Safu wima tatu mbadala

Kwa kutumia .row-cols-*madarasa, unaweza kuunda gridi kwa urahisi na safu wima sawa.

.colmtoto wa .row-cols-md-3

Safu tatu zisizo sawa

Pata safu wima tatu kuanzia kompyuta za mezani na kuongeza hadi eneo-kazi kubwa za upana mbalimbali. Kumbuka, safu wima za gridi zinapaswa kuongezwa hadi kumi na mbili kwa kizuizi kimoja cha mlalo. Zaidi ya hayo, na safu wima huanza kupangwa bila kujali eneo la kutazama.

.col-md-3

.col-md-6

.col-md-3

Safu mbili

Pata safu wima mbili kuanzia kwenye kompyuta za mezani na kuongeza hadi eneo-kazi kubwa .

.col-md-8

.col-md-4

Upana kamili, safu wima moja

Hakuna darasa za gridi zinazohitajika kwa vipengele vya upana kamili.

Safu mbili zilizo na safu wima mbili

Kulingana na hati, kuweka kiota ni rahisi—weka tu safu mlalo ndani ya safu wima iliyopo. Hii hukupa safu wima mbili kuanzia kwenye dawati na kuongeza hadi eneo-kazi kubwa , na nyingine mbili (upana sawa) ndani ya safu kubwa zaidi.

Katika saizi za vifaa vya mkononi, kompyuta kibao na chini, safu wima hizi na safu wima zao zilizowekwa zitapangwa.

.col-md-8

.col-md-6

.col-md-4

Mchanganyiko: simu na eneo-kazi

Mfumo wa gridi ya Bootstrap v4 una viwango vitano vya madarasa: xs (ndogo zaidi, infix ya darasa hili haitumiki), sm (ndogo), md (kati), lg (kubwa), na xl (kubwa zaidi). Unaweza kutumia karibu mchanganyiko wowote wa madarasa haya ili kuunda mipangilio inayobadilika zaidi na inayonyumbulika.

Kila safu ya madarasa huongezeka, ikimaanisha ikiwa unapanga kuweka upana sawa wa md, lg na xl, unahitaji tu kutaja md.

.col-md-8

.col-6 .col-md-4

.col-6

Mchanganyiko: simu ya mkononi, kompyuta ya mkononi, na eneo-kazi

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Mifereji ya maji

Kwa .gx-*madarasa, mifereji ya usawa inaweza kubadilishwa.

.colna .gx-4mifereji ya maji

Tumia .gy-*madarasa kudhibiti mifereji ya wima.

.colna .gy-4mifereji ya maji

Kwa .g-*madarasa, mifereji ya maji katika pande zote mbili inaweza kubadilishwa.

.colna .g-3mifereji ya maji

Vyombo

Madarasa ya ziada yaliyoongezwa katika Bootstrap v4.4 huruhusu kontena ambazo zina upana wa 100% hadi kikomo fulani. v5 inaongeza kikomo kipya xxl.

.chombo

.chombo-sm

.chombo-md

.chombo-lg

.chombo-xl

.chombo-xxl

.chombo-majimaji