Mifano ya gridi ya bootstrap

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

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 3 una viwango vinne vya madarasa: xs (simu), sm (vidonge), md (desktops), na lg (koptop kubwa). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Kusafisha safu

Futa huelea kwenye sehemu mahususi za kukatiza ili kuzuia ufunikaji usiofaa na maudhui yasiyolingana.

.col-xs-6 .col-sm-3
Badilisha ukubwa wa tovuti yako ya kutazama au iangalie kwenye simu yako kwa mfano.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Weka upya, sukuma na kuvuta upya

Weka upya mihimili, misukumo na mivutano katika sehemu mahususi za kukatika.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0