Skela

Bootstrap është ndërtuar në një rrjet të përgjegjshëm me 12 kolona. Ne kemi përfshirë gjithashtu paraqitje me gjerësi fikse dhe fluide bazuar në atë sistem.

Rrjeti i parazgjedhur 940 px

Sistemi i paracaktuar i rrjetit i ofruar si pjesë e Bootstrap është një rrjet me 12 kolona me gjerësi 940 px .

Ai gjithashtu ka katër variacione të përgjegjshme për pajisje dhe rezolucione të ndryshme: telefon, portret tabletë, tavolinë peizazhi dhe desktop të vegjël dhe desktopë të mëdhenj me ekran të gjerë.

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

Siç tregohet këtu, një plan urbanistik bazë mund të krijohet me dy "kolona", secila që përfshin një numër prej 12 kolonave themelore që përcaktuam si pjesë e sistemit tonë të rrjetit.

Kompensimi i kolonave

4 kompensim 4

3 kompensim 3

8 kompensim 4

<div class = "rresht" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Kolonat e folesë

Me sistemin e rrjetit statik (jo të lëngshëm) në Bootstrap, foleja është e lehtë. Për të futur përmbajtjen tuaj, thjesht shtoni një të re .rowdhe grup kolonash brenda një kolone .span*ekzistuese ..span*

Shembull

Niveli 1 i kolonës

Niveli 2

<div class = "rresht" > 
  <div class = "span12" > 
    Niveli 1 i kolonës
    <div class = "rresht" > 
      <div class = "span6" > Niveli 2 </div> 
      <div class = "span6" > Niveli 2 </div> 
    </div>
  </div>
</div>

Përshtatja e rrjetit

E ndryshueshme	Vlera e paracaktuar	Përshkrim
`@gridColumns`	12	Numri i kolonave
`@gridColumnWidth`	60 px	Gjerësia e secilës kolonë
`@gridGutterWidth`	20 px	Hapësira negative midis kolonave
`@siteWidth`	Shuma e llogaritur e të gjitha kolonave dhe ulluqeve	Numëron numrin e kolonave dhe ulluqeve për të vendosur gjerësinë e `.container-fixed()`përzierjes

Variablat në LESS

Të integruara në Bootstrap janë një pjesë e vogël e variablave për personalizimin e sistemit të paracaktuar të rrjetit 940px, të dokumentuara më sipër. Të gjitha variablat për rrjetin ruhen në variabla.më pak.

Si të personalizoni

Modifikimi i rrjetit nënkupton ndryshimin e tre @grid*variablave dhe rikompilimin e Bootstrap. Ndryshoni variablat e rrjetit në variablat.less dhe përdorni një nga katër mënyrat e dokumentuara për të ripërpiluar . Nëse po shtoni më shumë kolona, sigurohuni që të shtoni CSS për ato në grid.less.

Qëndrimi i përgjegjshëm

Përshtatja e rrjetit funksionon vetëm në nivelin e paracaktuar, rrjetin 940px. Për të ruajtur aspektet reaguese të Bootstrap, do t'ju duhet gjithashtu të personalizoni rrjetet në responsive.less.

Paraqitje fikse

Struktura e paracaktuar dhe e thjeshtë me gjerësi 940 px, e përqendruar për pothuajse çdo faqe interneti ose faqe të ofruar nga një e vetme <div class="container">.

<trupi>
  <div class = "enë" > 
    ...
  </div>
</body>

Paraqitja e lëngshme

<div class="container-fluid">jep strukturë fleksibël të faqes, gjerësi minimale dhe maksimale dhe një shirit anësor në të majtë. Është i shkëlqyeshëm për aplikacionet dhe dokumentet.

<div class = "kontenier-lëng" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Përmbajtja e shiritit anësor-->
    </div>
    <div class = "span10" > 
      <!--Përmbajtja e trupit-->
    </div>
  </div>
</div>

Pajisjet e mbështetura

Bootstrap mbështet një sërë pyetjesh mediatike për të ndihmuar që projektet tuaja t'i bëjnë më të përshtatshme në pajisje dhe rezolucione të ndryshme të ekranit. Ja çfarë përfshihet:

Etiketa	Gjerësia e paraqitjes	Gjerësia e kolonës	Gjerësia e ulluqit
Telefonat inteligjentë	480px dhe më poshtë	Kolona të lëngshme, pa gjerësi fikse
Tableta portrete	480px deri në 768px	Kolona të lëngshme, pa gjerësi fikse
Pllakat e peizazhit	768px deri në 940px	44 px	20 px
E paracaktuar	940px e lart	60 px	20 px
Ekran i madh	1210px e lart	70 px	30 px

Cfare bejne ata

Pyetjet e medias lejojnë CSS të personalizuar bazuar në një numër kushtesh - raportet, gjerësia, lloji i ekranit, etj. - por zakonisht fokusohet rreth min-widthdhe max-width.

Ndryshoni gjerësinë e kolonës në rrjetin tonë
Vendosni elementët në vend që të notoni kudo që është e nevojshme
Ndrysho madhësinë e titujve dhe tekstit për të qenë më të përshtatshëm për pajisjet

Duke përdorur pyetjet e medias

Bootstrap nuk i përfshin automatikisht këto pyetje mediatike, por kuptimi dhe shtimi i tyre është shumë i lehtë dhe kërkon konfigurim minimal. Ju keni disa opsione për të përfshirë veçoritë e përgjegjshme të Bootstrap:

Përdorni versionin reagues të përpiluar, bootstrap-responsive.css
Shto @import "responsive.less" dhe rikompiloje Bootstrap
Modifiko dhe rikompiloje responsive.less si një të veçantë

Pse të mos e përfshini vetëm atë? Të themi të vërtetën, jo gjithçka duhet të jetë e përgjegjshme. Në vend që të inkurajojmë zhvilluesit të heqin këtë veçori, mendojmë se është më mirë ta aktivizojmë atë.

  // Telefonat e peizazhit dhe poshtë
  @media ( gjerësia maksimale : 480 px ) { ... }     
 
  // Telefon peizazh në tablet portret
  @media ( gjerësia maksimale : 768 px ) { ... }     
 
  // Portret i tabletës në peizazh dhe desktop
  @media ( gjerësia minimale : 768 px ) dhe ( gjerësia maksimale : 940 px ) { ... }        
 
  // Desktop i madh
  @media ( min - gjerësia : 1200 px ) { .. }