Mifano ya gridi ya bootstrap

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

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-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

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
.col-md-4
.col-md-4

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-6
.col-md-4

Mchanganyiko: simu na eneo-kazi

Mfumo wa gridi ya Bootstrap v4 una viwango vitano vya madarasa: xs (ndogo zaidi), 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 xs na sm, unahitaji tu kutaja xs.

.col-12 .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

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

.col-12 .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