Tsohuwar tsarin grid da aka bayar azaman ɓangare na Bootstrap shine grid mai faɗin 940px, grid 12 .

Hakanan yana da bambance-bambancen amsa guda huɗu don na'urori da shawarwari daban-daban: waya, hoton kwamfutar hannu, shimfidar tebur da ƙananan tebur, da manyan kwamfutoci masu faɗin allo.

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

Kamar yadda aka nuna a nan, za a iya ƙirƙira wani tsari na asali tare da "ginshiƙai" guda biyu, kowannensu yana da adadin ginshiƙai 12 da muka ayyana a matsayin wani ɓangare na tsarin grid ɗin mu.

Tare da tsarin grid na tsaye (marasa ruwa) a cikin Bootstrap, gida yana da sauƙi. Don shigar da abun cikin ku, kawai ƙara sabon .rowda saitin .span*ginshiƙai a cikin .span*ginshiƙi da ke akwai.

Misali

Layukan da aka gina su ya kamata su haɗa da saitin ginshiƙai waɗanda suka haɗa har zuwa adadin ginshiƙan iyayensa. Misali, .span3ya kamata a sanya ginshiƙai biyu masu gida a cikin .span6.

<div class = "jere" > 
  <div class = "span12" > 
    Mataki na 1 na shafi
    <div class = "jere" > 
      <div class = "span6" > Mataki na 2 </div> 
      <div class = "span6" > Mataki na 2 </div> 
    </div>
  </div>
</div>

Kashi ɗari, ba pixels ba

Tsarin grid na ruwa yana amfani da kaso don faɗin shafi maimakon ƙayyadaddun pixels. Hakanan yana da bambance-bambancen amsa iri ɗaya kamar ƙayyadaddun tsarin grid ɗin mu, yana tabbatar da madaidaitan madaidaitan maɓalli don ƙudurin allo da na'urori.

Layukan ruwa

Yi kowane jeri ruwa ta hanyar canzawa .rowzuwa .row-fluid. ginshiƙan sun kasance daidai ɗaya, yana mai da shi madaidaici don juyawa tsakanin ƙayyadaddun shimfidar wuri da ruwa.

Alamar alama

<div class = "jere-ruwa" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Gida tare da grid ruwa ya ɗan bambanta: adadin ginshiƙan gida baya buƙatar dacewa da iyaye. Madadin haka, ana sake saita ginshiƙan ku a kowane matakin saboda kowane jere yana ɗaukar 100% na ginshiƙin iyaye.

<div class = "jere-ruwa" > 
  <div class = "span12" > 
    Mataki na 1 na shafi
    <div class = "jere-ruwa" > 
      <div class = "span6" > Mataki na 2 </div> 
      <div class = "span6" > Mataki na 2 </div> 
    </div>
  </div>
</div>

Canje-canje a cikin LESS

Gina cikin Bootstrap kaɗan ne na masu canji don keɓance tsoffin tsarin grid 940px, rubuce a sama. Ana adana duk masu canji na grid a cikin masu canji.less.

Yadda ake keɓancewa

Gyara grid yana nufin canza masu @grid*canji guda uku da sake tattara Bootstrap. Canja masu canjin grid a cikin masu canji.less kuma yi amfani da ɗayan hanyoyi huɗu da aka rubuta don sake tarawa . Idan kana ƙara ƙarin ginshiƙai, tabbatar da ƙara CSS ga waɗanda ke cikin grid.less.

Kasance mai amsawa

Keɓance grid ɗin yana aiki ne kawai a matakin tsoho, grid 940px. Don kiyaye abubuwan da suka dace na Bootstrap, za ku kuma yi keɓancewar grid a cikin amsawa.less.

Kafaffen shimfidar wuri

Tsohuwar kuma mai sauƙi 940px-fadi, shimfidar wuri na tsakiya don kusan kowane gidan yanar gizo ko shafi da aka samar ta guda <div class="container">.

<jiki>
  <div class = "kwantena" > 
    ...
  </div>
</ jiki>

Tsarin ruwa

<div class="container-fluid">yana ba da tsarin shafi mai sassauƙa, min- da max- faɗin, da mashigin gefen hagu. Yana da kyau ga apps da docs.

<div class = "container-fluid" > 
  <div class = "jere-ruwa" > 
    <div class = "span2" > 
      <!-- Abun ciki na gefe-->
    </div>
    <div class = "span10" > 
      <!--Abin cikin jiki-->
    </div>
  </div>
</div>

Na'urori masu tallafi

Bootstrap yana goyan bayan ɗimbin tambayoyin kafofin watsa labarai a cikin fayil ɗaya don taimakawa yin ayyukan ku mafi dacewa akan na'urori daban-daban da ƙudurin allo. Ga abin da ya haɗa:

Yana buƙatar alamar meta

Don tabbatar da cewa na'urori suna nuna shafuka masu amsa yadda ya kamata, haɗa da tag meta tag.

<meta name = "viewport" abun ciki = "nisa = nisa-na'ura, sikelin farko=1.0" >  

Abin da suke yi

Tambayoyin watsa labarai suna ba da izinin CSS na al'ada dangane da adadin sharuɗɗa - ragi, faɗin, nau'in nuni, da sauransu-amma yawanci yana mai da hankali a kusa min-widthda max-width.

• Gyara nisa na ginshiƙi a cikin grid ɗin mu
• Tari abubuwa maimakon yin iyo a duk inda ya cancanta
• Maimaita kanun labarai da rubutu don zama mafi dacewa ga na'urori

Bootstrap baya haɗa waɗannan tambayoyin kafofin watsa labarai ta atomatik, amma fahimta da ƙara su abu ne mai sauƙi kuma yana buƙatar saiti kaɗan. Kuna da ƴan zaɓuɓɓuka don haɗawa da abubuwan amsawa na Bootstrap:

1. Yi amfani da sigar amsawa da aka haɗa, bootstrap-responsive.css
2. Ƙara @import "responsive.less" kuma a sake haɗa Bootstrap
3. Gyara da sake tattara amsawa.less azaman fayil daban

Me zai hana kawai hada shi? Gaskiyar magana, ba duk abin da yake bukatar ya kasance mai amsawa ba. Maimakon ƙarfafa masu haɓakawa don cire wannan fasalin, muna ganin zai fi dacewa mu kunna shi.

  // Wayoyin shimfidar wuri da ƙasa
  @media ( max - nisa : 480px ) { ... }     
 
  // Wayar shimfidar wuri zuwa kwamfutar hannu mai hoto
  @media ( max - nisa : 768px ) { ... }     
 
  // Hoton kwamfutar hannu zuwa wuri mai faɗi da tebur
  @media ( min - nisa : 768px ) da ( max - nisa : 980px ) { ... }        
 
  // Babban tebur
  @media ( min - nisa : 1200px ) { .. }