Kiunzi

Bootstrap imejengwa kwenye gridi ya safu wima 12 inayojibu. Tumejumuisha pia mipangilio ya upana- dhabiti na upana wa maji kulingana na mfumo huo.

Gridi chaguomsingi ya 940px

Mfumo wa gridi chaguo-msingi uliotolewa kama sehemu ya Bootstrap ni gridi ya safu wima 12 kwa upana wa 940px .

Pia ina tofauti nne za kuitikia kwa vifaa na maazimio mbalimbali: simu, picha ya kompyuta ya mkononi, mandhari ya jedwali na kompyuta ndogo za mezani, na eneo-kazi kubwa la skrini pana.

<div class = "safu" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Kama inavyoonyeshwa hapa, mpangilio msingi unaweza kuundwa kwa "safu wima" mbili, kila moja ikijumuisha idadi ya safu wima 12 tulizofafanua kama sehemu ya mfumo wetu wa gridi ya taifa.

Kuweka safu wima

4 kurekebisha 4

3 kurekebisha 3

8 kurekebisha 4

<div class = "safu" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</ div>

Safu wima za kuota

Kwa mfumo wa gridi ya tuli (isiyo ya maji) katika Bootstrap, kuweka kiota ni rahisi. Ili kuweka maudhui yako, ongeza tu safu mpya .rowna seti ya .span*safu wima zilizopo .span*.

Mfano

Kiwango cha 1 cha safu wima

Kiwango cha 2

<div class = "safu" > 
  <div class = "span12" > 
    Kiwango cha 1 cha safu wima
    <div class = "safu" > 
      <div class = "span6" > Kiwango cha 2 </div> 
      <div class = "span6" > Kiwango cha 2 </div> 
    </ div>
  </ div>
</ div>

Kubinafsisha gridi

Inaweza kubadilika	Thamani chaguomsingi	Maelezo
`@gridColumns`	12	Idadi ya safu wima
`@gridColumnWidth`	60px	Upana wa kila safu
`@gridGutterWidth`	20px	Nafasi hasi kati ya safu wima
`@siteWidth`	Jumla iliyokokotwa ya safu wima zote na mifereji ya maji	Huhesabu idadi ya nguzo na mifereji ya maji ili kuweka upana wa `.container-fixed()`mchanganyiko

Vigeu katika LESS

Imejengwa ndani ya Bootstrap ni vijisehemu vichache vya kubinafsisha mfumo chaguomsingi wa gridi ya 940px, ulioandikwa hapo juu. Vigezo vyote vya gridi ya taifa vinahifadhiwa katika vigezo.less.

Jinsi ya kubinafsisha

Kurekebisha gridi ya taifa kunamaanisha kubadilisha @grid*vigezo vitatu na kurejesha Bootstrap. Badilisha vigeu vya gridi katika variables.less na utumie mojawapo ya njia nne zilizorekodiwa kurejesha . Ikiwa unaongeza safu wima zaidi, hakikisha kuwa umeongeza CSS kwa zile zilizo kwenye grid.less.

Kukaa msikivu

Ubinafsishaji wa gridi ya taifa hufanya kazi tu katika kiwango chaguo-msingi, gridi ya 940px. Ili kudumisha vipengele vya kuitikia vya Bootstrap, itabidi pia ubadilishe gridi kukufaa katika responsive.less.

Mpangilio usiohamishika

Mpangilio chaguomsingi na rahisi wa upana wa 940px, unaozingatia katikati kwa takriban tovuti au ukurasa wowote uliotolewa na <div class="container">.

<mwili>
  <div class = "chombo" > 
    ...
  </ div>
</ mwili>

Mpangilio wa maji

<div class="container-fluid">inatoa muundo wa ukurasa unaonyumbulika, upana wa chini na wa juu zaidi, na utepe wa upande wa kushoto. Ni nzuri kwa programu na hati.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Maudhui ya Upau wa kando-->
    </ div>
    <div class = "span10" > 
      <!--Maudhui ya mwili-->
    </ div>
  </ div>
</ div>

Vifaa vinavyotumika

Bootstrap inaauni hoja chache za maudhui ili kusaidia kufanya miradi yako ifae zaidi kwenye vifaa tofauti na masuluhisho ya skrini. Hivi ndivyo vilivyojumuishwa:

Lebo	Upana wa mpangilio	Upana wa safu wima	Upana wa gutter
Simu mahiri	480px na chini	Safu wima za maji, hakuna upana usiobadilika
Vidonge vya picha	480px hadi 768px	Safu wima za maji, hakuna upana usiobadilika
Vidonge vya mazingira	768px hadi 940px	44px	20px
Chaguomsingi	940px na juu	60px	20px
Onyesho kubwa	1210px na juu	70px	30px

Wanachofanya

Hoja za midia huruhusu CSS maalum kulingana na idadi ya masharti—uwiano, upana, aina ya onyesho, n.k—lakini kwa kawaida hulenga min-widthna max-width.

Rekebisha upana wa safu kwenye gridi yetu
Vipengee vya mrundikano badala ya kuelea inapobidi
Badilisha ukubwa wa vichwa na maandishi ili yafae zaidi vifaa

Kwa kutumia maswali ya vyombo vya habari

Bootstrap haijumuishi maswali haya ya media kiotomatiki, lakini kuelewa na kuyaongeza ni rahisi sana na kunahitaji usanidi mdogo. Una chaguo chache za kujumuisha vipengele vya kuitikia vya Bootstrap:

Tumia toleo la msikivu lililokusanywa, bootstrap-responsive.css
Ongeza @import "responsive.less" na urudishe Bootstrap
Rekebisha na urudishe responsive.less kama tofauti

Kwa nini usiijumuishe tu? Ukweli usemwe, sio kila kitu kinahitaji kuitikia. Badala ya kuhimiza watengenezaji kuondoa kipengele hiki, tunaona ni vyema kukiwezesha.

  // Simu za mazingira na chini
  @media ( max - width : 480px ) { ... }     
 
  // Simu ya mazingira kwa kompyuta kibao ya picha
  @media ( max - width : 768px ) { ... }     
 
  // Picha kibao kwa mazingira na eneo-kazi
  @media ( min - width : 768px ) na ( max - width : 940px ) { ... }        
 
  // Desktop kubwa
  @media ( min - upana : 1200px ) { .. }