La defaŭlta kradsistemo provizita kiel parto de Bootstrap estas 940px-larĝa, 12-kolumna krado .

Ĝi ankaŭ havas kvar respondemajn variaĵojn por diversaj aparatoj kaj rezolucioj: telefono, tablojda portreto, tablopejzaĝo kaj malgrandaj labortabloj, kaj grandaj larĝekranaj labortabloj.

<div klaso = "vico" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Kiel montrite ĉi tie, baza aranĝo povas esti kreita kun du "kolumnoj", ĉiu ampleksanta kelkajn el la 12 fundamentaj kolumnoj, kiujn ni difinis kiel parto de nia kradsistemo.

Kun la senmova (ne-fluida) kradsistemo en Bootstrap, nestado estas facila. Por nesti vian enhavon, simple aldonu novan .rowkaj aron da .span*kolumnoj en ekzistanta .span*kolumno.

Ekzemplo

<div klaso = "vico" > 
  <div class = "span12" > 
    Nivelo 1 de kolumno
    <div klaso = "vico" > 
      <div class = "span6" > Nivelo 2 </div> 
      <div class = "span6" > Nivelo 2 </div> 
    </div>
  </div>
</div>

Variabloj en MLES

Enkonstruita en Bootstrap estas manpleno da variabloj por agordi la defaŭltan 940px kradsistemon, dokumentita supre. Ĉiuj variabloj por la krado estas stokitaj en variabloj.malpli.

Kiel personecigi

Modifi la kradon signifas ŝanĝi la tri @grid*variablojn kaj rekompili Bootstrap. Ŝanĝu la kradajn variablojn en variables.less kaj uzu unu el la kvar manieroj dokumentitaj por rekompili . Se vi aldonas pliajn kolumnojn, nepre aldonu la CSS por tiuj en grid.less.

Restante respondema

Personigo de la krado funkcias nur ĉe la defaŭlta nivelo, la 940px krado. Por konservi la respondemajn aspektojn de Bootstrap, vi ankaŭ devos personecigi la kradojn en responsive.less.

Fiksa aranĝo

La defaŭlta kaj simpla 940px-larĝa, centrita aranĝo por preskaŭ ajna retejo aŭ paĝo provizita de ununura <div class="container">.

<korpo>
  <div class = "ujo" > 
    ...
  </div>
</korpo>

Fluida aranĝo

<div class="container-fluid">donas flekseblan paĝstrukturon, min- kaj max-larĝojn, kaj maldekstran flankbreton. Ĝi estas bonega por programoj kaj dokumentoj.

<div class = "ujo-fluido" > 
  <div class = "vic-fluid" > 
    <div klaso = "span2" > 
      <!--Flankmenuo enhavo-->
    </div>
    <div class = "span10" > 
      <!--Korpa enhavo-->
    </div>
  </div>
</div>

Subtenataj aparatoj

Bootstrap subtenas kelkajn amaskomunikilajn demandojn por helpi fari viajn projektojn pli taŭgaj en malsamaj aparatoj kaj ekranrezolucioj. Jen kio estas inkluzivita:

Kion ili faras

Amaskomunikilaraj demandoj ebligas kutiman CSS bazitan sur kelkaj kondiĉoj - proporcioj, larĝoj, ekrantipo, ktp - sed kutime fokusiĝas ĉirkaŭ min-widthkaj max-width.

• Modifi la larĝon de kolumno en nia krado
• Staku elementojn anstataŭ flosi kie ajn necese
• Regrandigu titolojn kaj tekston por esti pli taŭga por aparatoj

Bootstrap ne aŭtomate inkluzivas ĉi tiujn amaskomunikilajn demandojn, sed kompreni kaj aldoni ilin estas tre facila kaj postulas minimuman agordon. Vi havas kelkajn eblojn por inkluzivi la respondemajn funkciojn de Bootstrap:

1. Uzu la kompilitan respondeman version, bootstrap-responsive.css
2. Aldonu @import "responsive.less" kaj rekompilu Bootstrap
3. Modifi kaj rekompili responsive.less kiel aparta

Kial ne simple inkluzivi ĝin? Verdire, ne ĉio devas esti respondema. Anstataŭ instigi programistojn forigi ĉi tiun funkcion, ni pensas, ke plej bone ebligu ĝin.

  // Pejzaĝaj telefonoj kaj malsupren
  @media ( maks - larĝo : 480 px ) { ... }     
 
  // Pejzaĝa telefono al portreta tablojdo
  @media ( maks - larĝo : 768 px ) { ... }     
 
  // Portreta tablojdo al pejzaĝo kaj labortablo
  @media ( min - larĝo : 768 px ) kaj ( max - width : 940 px ) { ... }        
 
  // Granda labortablo
  @media ( min - larĝo : 1200 px ) { .. }