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.

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

Safu mlalo zilizowekwa zinapaswa kujumuisha seti ya safu wima zinazojumlisha hadi idadi ya safu wima za mzazi wake. Kwa mfano, .span3safu wima mbili zilizowekwa zinapaswa kuwekwa ndani ya .span6.

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

Asilimia, si pikseli

Mfumo wa gridi ya maji hutumia percents kwa upana wa safu badala ya pikseli zisizobadilika. Pia ina tofauti zinazofanana na mfumo wetu wa gridi isiyobadilika, inahakikisha uwiano unaofaa wa maazimio na vifaa muhimu vya skrini.

Safu za maji

Tengeneza safu mlalo yoyote iwe kioevu kwa kubadilisha .rowhadi .row-fluid. Safu wima hukaa sawa, na kuifanya iwe rahisi sana kugeuza kati ya mipangilio isiyobadilika na ya kioevu.

Alama

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Kuweka viota kwa gridi za maji ni tofauti kidogo: idadi ya safu wima zilizowekwa haihitaji kulingana na mzazi. Badala yake, safu wima zako huwekwa upya katika kila kiwango kwa sababu kila safu huchukua 100% ya safu wima kuu.

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

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">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Supported devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Requires meta tag

To ensure devices display responsive pages properly, include the viewport meta tag.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

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

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:

1. Tumia toleo la msikivu lililokusanywa, bootstrap-responsive.css
2. Ongeza @import "responsive.less" na urudishe Bootstrap
3. Kurekebisha na kukusanya responsive.less kama faili 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 : 980px ) { ... }        
 
  // Desktop kubwa
  @media ( min - upana : 1200px ) { .. }