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 class="row">
  <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

<div class="row">
  <div class="span12">
    Vlak 1 van kolom
    <div class="row">
      <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 class="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 class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sybalkinhoud-->
    </div>
    <div class="span10">
      <!--Liggaam inhoud-->
    </div>
  </div>
</div>

Ondersteunde toestelle

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

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 responsief.less as 'n aparte

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 breedte: 480px) { ... }

  // Landskapfoon na portrettablet
  @media (maksimum breedte: 768px) { ... }

  // Portret tablet na landskap en lessenaar
  @media (min-breedte: 768px) en (maks-breedte: 940px) { ... }

  // Groot lessenaar
  @media (min-breedte: 1200px) { .. }