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

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

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 don taimakawa yin ayyukan ku mafi dacewa akan na'urori daban-daban da ƙudurin allo. Ga abin da ya haɗa:

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.kasa azaman dabam

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 : 940px ) { ... }        
 
  // Babban tebur
  @media ( min - nisa : 1200px ) { .. }