Kumanga

Bootstrap imamangidwa pa gridi yomvera yamagulu 12. Taphatikizanso masanjidwe okhazikika komanso amadzimadzi-width motengera dongosololi.

940px grid yofikira

Dongosolo lokhazikika la gridi loperekedwa ngati gawo la Bootstrap ndi 940px-wide, 12-column grid .

Ilinso ndi mitundu inayi yomvera pazida zosiyanasiyana ndi malingaliro: foni, chithunzi cha piritsi, mawonekedwe a tebulo ndi ma desktops ang'onoang'ono, ndi ma desktops akulu akulu.

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

Monga momwe tawonetsera pano, mawonekedwe oyambira amatha kupangidwa ndi "mizere" iwiri, iliyonse imakhala ndi magawo 12 oyambira omwe tafotokoza ngati gawo la gridi yathu.

Kuchepetsa mizati

4 sintha 4

3 kutsitsa 3

8 gawo 4

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

Mizati ya zisa

Ndi static (non-fluid) grid system ku Bootstrap, kumanga zisa ndikosavuta. Kuti muwononge zomwe muli nazo, ingowonjezerani zatsopano .rowndi magulu omwe ali .span*muzambiri zomwe zilipo kale .span*.

Chitsanzo

Gawo 1 la gawo

Gawo 2

<div class = "mzere" > 
  <div class = "span12" > 
    Gawo 1 la gawo
    <div class = "mzere" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

Kusintha kwa gridi

Zosintha	Mtengo wofikira	Kufotokozera
`@gridColumns`	12	Chiwerengero cha mizati
`@gridColumnWidth`	60px pa	Kukula kwa ndime iliyonse
`@gridGutterWidth`	20px pa	Malo opanda pake pakati pa mizati
`@siteWidth`	Kuwerengera kuchuluka kwa zipilala zonse ndi ma gutters	Kuwerengera kuchuluka kwa mizati ndi ngalande kuti muyike m'lifupi mwa `.container-fixed()`mixin

Zosintha mu LESS

Omangidwa mu Bootstrap ndi mitundu ingapo yosinthira makonda a 940px grid system, zolembedwa pamwambapa. Zosintha zonse za gridi zimasungidwa mu variables.less.

Momwe mungasinthire mwamakonda anu

Kusintha gululi kumatanthauza kusintha zosintha zitatu @grid*ndikubwezeretsanso Bootstrap. Sinthani zosintha za gululi mu zosintha.less ndipo gwiritsani ntchito imodzi mwa njira zinayi zolembedwa kuti muwonjezere . Ngati mukuwonjezera mizati yambiri, onetsetsani kuti mwawonjezera CSS kwa omwe ali mu grid.less.

Kukhala omvera

Kusintha kwa gridi kumangogwira ntchito mosakhazikika, gridi ya 940px. Kuti mukhalebe ndi mawonekedwe a Bootstrap, muyeneranso kusintha ma grids mu responsive.less.

Masanjidwe okhazikika

Zosasintha komanso zosavuta 940px-wide, masanjidwe apakati pafupifupi patsamba lililonse kapena tsamba loperekedwa ndi <div class="container">.

<thupi>
  <div class = "chotengera" > 
    ...
  </div>
</ thupi>

Kapangidwe kamadzimadzi

<div class="container-fluid">imapereka mawonekedwe osinthika amasamba, min- ndi max-widths, ndi chotchinga chakumanzere. Ndi yabwino kwa mapulogalamu ndi zolemba.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Zam'mbali mwa mbali-->
    </div>
    <div class = "span10" > 
      <!--Zokhudza thupi-->
    </div>
  </div>
</div>

Zida zothandizira

Bootstrap imathandizira mafunso angapo apawailesi kuti ikuthandizeni kupanga mapulojekiti anu kukhala oyenera pazida zosiyanasiyana komanso zowonera. Nazi zomwe zikuphatikizidwa:

Label	Kamangidwe m'lifupi	M'lifupi mwake	Kuchuluka kwa ngalande
Mafoni am'manja	480px ndi pansipa	Zigawo zamadzimadzi, palibe makulidwe okhazikika
Mapiritsi a zithunzi	480px mpaka 768px	Zigawo zamadzimadzi, palibe makulidwe okhazikika
Mapale mapiritsi	768px mpaka 940px	44px pa	20px pa
Zosasintha	940px ndi mmwamba	60px pa	20px pa
Chiwonetsero chachikulu	1210px ndi mmwamba	70px pa	30px pa

Zomwe amachita

Mafunso azama media amalola CSS yokhazikika kutengera momwe zinthu ziliri, kuchuluka, kutalika, mtundu wowonetsera, ndi zina zambiri, koma nthawi zambiri zimayang'ana mozungulira min-widthndi max-width.

Sinthani kukula kwa gawo mu gridi yathu
Sakanizani zinthu m'malo moyandama ngati kuli kofunikira
Sinthani kukula kwa mitu ndi mawu kuti zikhale zoyenera pazida

Kugwiritsa ntchito mafunso pa media

Bootstrap sichimangophatikiza mafunso awa, koma kumvetsetsa ndikuwonjezera ndikosavuta ndipo kumafuna kukhazikitsidwa kochepa. Muli ndi zosankha zingapo zophatikizira zomvera za Bootstrap:

Gwiritsani ntchito mtundu womvera wophatikizidwa, bootstrap-responsive.css
Onjezani @import "responsive.less" ndikubwezeretsani Bootstrap
Sinthani ndi recomplain responsive.less ngati padera

Bwanji osangophatikizamo? Kunena zoona, sikuti zonse zimafunika kulabadira. M'malo molimbikitsa okonza mapulogalamu kuti achotse izi, timawona kuti ndibwino kuti tithe.

  // Mafoni amtundu ndi pansi
  @media ( max - wide : 480px ) { ... }     
 
  // Mafoni amtundu kuti azijambula piritsi
  @media ( max - wide : 768px ) { ... }     
 
  // Chithunzi piritsi ku malo ndi desktop
  @media ( min - wide : 768px ) ndi ( max - wide : 940px ) { ... }        
 
  // Desktop yayikulu
  @media ( min - wide : 1200px ) { .. }