torolalana

Bootstrap dia miorina amin'ny tsanganana tsanganana 12 mandray andraikitra. Nampidirinay ihany koa ny fisehon'ny sakan'ny ranon-javatra miorina amin'io rafitra io.

Grid 940px default

Ny rafitra grid default nomena ho ampahany amin'ny Bootstrap dia grid 940px-wide, tsanganana 12 .

Manana karazany efatra ihany koa izy io ho an'ny fitaovana sy fanapahan-kevitra isan-karazany: telefaona, sarin'ny tablette, tontolon'ny latabatra sy birao kely, ary birao lehibe mivelatra.

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

Araka ny aseho eto, dia azo amboarina miaraka amin'ny "tsanganana" roa ny lamina fototra iray, izay samy mamakivaky ny tsanganana fototra 12 izay nofaritanay ho ampahany amin'ny rafitry ny grid.

tsanganana offset

4 ofy 4

3 ofy 3

8 ofy 4

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

Andry fanatobiana

Miaraka amin'ny rafitra static (tsy misy rano) ao amin'ny Bootstrap, dia mora ny manao akany. Mba hanafenana ny atiny dia ampio tsanganana vaovao .rowsy andiana .span*tsanganana ao anaty .span*tsanganana efa misy.

OHATRA

Ambaratonga 1 amin'ny tsanganana

Ambaratonga 2

<div class = "row" > 
  <div class = "span12" > 
    Ambaratonga 1 amin'ny tsanganana
    <div class = "row" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

Fanamboarana Grid

Miovaova	Sanda default	Description
`@gridColumns`	12	Isan'ny tsanganana
`@gridColumnWidth`	60px	Sakan'ny tsanganana tsirairay
`@gridGutterWidth`	20px	Espace ratsy eo anelanelan'ny tsanganana
`@siteWidth`	Ny fitambaran'ny tsanganana sy tatatra rehetra	Manisa ny isan'ny tsanganana sy tatatra mba hametrahana ny sakan'ny `.container-fixed()`mixin

Variables amin'ny LESS

Namboarina tao amin'ny Bootstrap dia variana vitsivitsy ho an'ny fanamboarana ny rafitra grid 940px default, voarakitra etsy ambony. Ny variables rehetra ho an'ny grid dia voatahiry ao amin'ny variables.less.

Ahoana ny fanamboarana

Ny fanovana ny grid dia midika hoe manova ireo @grid*variables telo ary mamerina indray ny Bootstrap. Ovay ao anaty variables.less ny variables grids ary ampiasao ny iray amin'ireo fomba efatra voarakitra an-tsoratra hamerenana . Raha manampy tsanganana bebe kokoa ianao dia ampio ny CSS ho an'ireo ao amin'ny grid.less.

Mijanona mamaly

Ny fanamboarana ny grid dia tsy miasa afa-tsy amin'ny ambaratonga default, ny grid 940px. Mba hihazonana ny lafiny mamaly amin'ny Bootstrap dia tsy maintsy amboarinao amin'ny responsive.less ihany koa ny grids.

Filaminana raikitra

Ny fandrindrana 940px mirefy 940px mivelatra, mivondrona ho an'ny tranokala na pejy rehetra omen'ny <div class="container">.

<vatana>
  <div class = "container" > 
    ...
  </div>
</body>

Fametrahana ranon-javatra

<div class="container-fluid">manome firafitry ny pejy mora azo, ny sakan'ny min- sy max, ary ny sisiny havia. Tena tsara ho an'ny fampiharana sy doka.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sidebar votoaty-->
    </div>
    <div class = "span10" > 
      <!--Votoantin'ny vatana-->
    </div>
  </div>
</div>

Fitaovana tohanana

Ny Bootstrap dia manohana fanontaniana media vitsivitsy mba hanampiana ny tetikasanao ho mety kokoa amin'ny fitaovana samihafa sy ny famahana ny efijery. Ireto ny tafiditra ao:

Label	Sakan'ny layout	Sakan'ny tsanganana	Sakan'ny tatatra
finday avo lenta	480px ary ambany	Andry ranon-javatra, tsy misy sakany raikitra
Takela-bato misy sary	480 ka hatramin'ny 768 px	Andry ranon-javatra, tsy misy sakany raikitra
Tablets momba ny tany	768 ka hatramin'ny 940 px	44px	20px
toerana misy anao	940px sy ambony	60px	20px
Fampisehoana lehibe	1210px ary ambony	70px	30px

Ny ataony

Ny fangatahan'ny haino aman-jery dia mamela ny CSS manokana mifototra amin'ny fepetra maromaro — ny tahan'ny, ny sakany, ny karazana fampisehoana, sns — fa matetika mifantoka amin'ny manodidina min-widthsy max-width.

Ovao ny sakan'ny tsanganana ao amin'ny grid-tsika
Asio singa fa tsy mitsingevana na aiza na aiza ilaina
Hanova ny haben'ny lohateny sy lahatsoratra mba ho mety kokoa amin'ny fitaovana

Mampiasa ny fanontaniam-baovao

Ny Bootstrap dia tsy mampiditra ho azy ireo fanontaniana amin'ny haino aman-jery, fa ny fahazoana sy ny fampidirana azy ireo dia tena mora ary mitaky fanamboarana kely. Manana safidy vitsivitsy ianao hampidirana ireo endri-javatra mamaly an'i Bootstrap:

Ampiasao ny dikan-teny mitambatra, bootstrap-responsive.css
Ampio @import "responsive.less" ary amboary indray ny Bootstrap
Ovao sy amboary indray ny responsive.less ho misaraka

Maninona raha ampidirina fotsiny? Raha ny marina, tsy ny zava-drehetra no mila mamaly. Raha tokony hamporisika ny mpamorona hanala an'io endri-javatra io izahay, dia heverinay fa tsara kokoa ny mamela azy io.

  // telefaonina sy midina
  @media ( max - sakany : 480px ) { ... }     
 
  // telefaonina mitsivalana mankany amin'ny takelaka sarintany
  @media ( max - sakany : 768px ) { ... }     
 
  // Sarintany takelaka amin'ny lanezy sy desktop
  @media ( min - sakany : 768px ) ary ( max - sakany : 940px ) { ... }        
 
  // Desktop lehibe
  @media ( min - sakany : 1200px ) { .. }