Die verstekroosterstelsel wat as deel van Bootstrap verskaf word, is 'n 940px-wye, 12-kolom-rooster .

Dit het ook vier responsiewe variasies vir verskeie toestelle en resolusies: foon, tabletportret, tafellandskap en klein lessenaars, en groot breëskerm-rekenaars.

<div klas = "ry" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Soos hier getoon, kan 'n basiese uitleg geskep word met twee "kolomme", wat elk oor 'n aantal van die 12 grondkolomme strek wat ons as deel van ons roosterstelsel gedefinieer het.

Met die statiese (nie-vloeibare) roosterstelsel in Bootstrap is nesmaak maklik. Om jou inhoud te nes, voeg net 'n nuwe .rowen stel .span*kolomme binne 'n bestaande .span*kolom by.

Voorbeeld

Geneste rye moet 'n stel kolomme insluit wat optel by die aantal kolomme van sy ouer. Byvoorbeeld, twee geneste .span3kolomme moet binne 'n .span6.

<div klas = "ry" > 
  <div klas = "span12" > 
    Vlak 1 van kolom
    <div klas = "ry" > 
      <div class = "span6" > Vlak 2 </div> 
      <div class = "span6" > Vlak 2 </div> 
    </div>
  </div>
</div>

Persentasies, nie pixels nie

Die vloeistofroosterstelsel gebruik persente vir kolomwydtes in plaas van vaste pixels. Dit het ook dieselfde responsiewe variasies as ons vaste roosterstelsel, wat die regte verhoudings vir sleutelskermresolusies en toestelle verseker.

Vloeistof rye

Maak enige ry vloeibaar deur eenvoudig na te .rowverander .row-fluid. Die kolomme bly presies dieselfde, wat dit baie eenvoudig maak om tussen vaste en vloeiende uitlegte te blaai.

Opmerk

<div klas = "ry-vloeistof" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Nesting met vloeistofroosters is 'n bietjie anders: die aantal geneste kolomme hoef nie by die ouer te pas nie. In plaas daarvan word jou kolomme op elke vlak teruggestel omdat elke ry 100% van die ouerkolom beslaan.

<div klas = "ry-vloeistof" > 
  <div klas = "span12" > 
    Vlak 1 van kolom
    <div klas = "ry-vloeistof" > 
      <div class = "span6" > Vlak 2 </div> 
      <div class = "span6" > Vlak 2 </div> 
    </div>
  </div>
</div>

Veranderlikes in MINDER

Ingebou in Bootstrap is 'n handvol veranderlikes om die verstek 940px-roosterstelsel aan te pas, hierbo gedokumenteer. Alle veranderlikes vir die rooster word in veranderlikes.less gestoor.

Hoe om aan te pas

Om die rooster te wysig beteken om die drie @grid*veranderlikes te verander en Bootstrap weer saam te stel. Verander die roosterveranderlikes in variables.less en gebruik een van die vier maniere wat gedokumenteer is om te hersaamstel . As jy meer kolomme byvoeg, maak seker dat jy die CSS byvoeg vir dié in grid.less.

Bly responsief

Aanpassing van die rooster werk slegs op die verstekvlak, die 940px-rooster. Om die responsiewe aspekte van Bootstrap te handhaaf, sal jy ook die roosters in responsive.less moet aanpas.

Vaste uitleg

Die verstek en eenvoudige 940px-wye, gesentreerde uitleg vir omtrent enige webwerf of bladsy wat deur 'n enkele <div class="container">.

<liggaam>
  <div klas = "houer" > 
    ...
  </div>
</body>

Vloeibare uitleg

<div class="container-fluid">gee buigsame bladsystruktuur, min- en maksimum-wydtes, en 'n linkerkantse kantbalk. Dit is wonderlik vir toepassings en dokumente.

<div klas = "houer-vloeistof" > 
  <div klas = "ry-vloeistof" > 
    <div klas = "span2" > 
      <!--Sybalkinhoud-->
    </div>
    <div klas = "span10" > 
      <!--Liggaam inhoud-->
    </div>
  </div>
</div>

Ondersteunde toestelle

Bootstrap ondersteun 'n handvol medianavrae in 'n enkele lêer om te help om jou projekte meer toepaslik op verskillende toestelle en skermresolusies te maak. Hier is wat ingesluit is:

Vereis metatag

Om te verseker dat toestelle responsiewe bladsye behoorlik vertoon, sluit die viewport-metamerker in.

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

Wat hulle doen

Medianavrae maak voorsiening vir pasgemaakte CSS gebaseer op 'n aantal voorwaardes—verhoudings, breedtes, vertoontipe, ens—maar fokus gewoonlik rondom min-widthen max-width.

• Verander die breedte van kolom in ons rooster
• Stapel elemente in plaas van om te dryf waar nodig
• Verander die grootte van opskrifte en teks om meer gepas vir toestelle te wees

Bootstrap sluit nie outomaties hierdie medianavrae in nie, maar om dit te verstaan ​​en by te voeg is baie maklik en vereis minimale opstelling. U het 'n paar opsies om die responsiewe kenmerke van Bootstrap in te sluit:

1. Gebruik die saamgestelde responsiewe weergawe, bootstrap-responsive.css
2. Voeg @import "responsive.less" by en hersaamstel Bootstrap
3. Verander en hersaamstel responsive.less as 'n aparte lêer

Hoekom dit nie net insluit nie? Om die waarheid te sê, nie alles hoef reageer te wees nie. In plaas daarvan om ontwikkelaars aan te moedig om hierdie kenmerk te verwyder, dink ons ​���dit is die beste om dit te aktiveer.

  // Landskap fone en af
  @media ( maksimum - wydte : 480px ) { ... }     
 
  // Landskapfoon na portrettablet
  @media ( maksimum - wydte : 768px ) { ... }     
 
  // Portret tablet na landskap en lessenaar
  @media ( min - breedte : 768px ) en ( maksimum - wydte : 980px ) { ... }        
 
  // Groot lessenaar
  @media ( min - breedte : 1200px ) { .. }