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.

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

OHATRA

Ny andalana voatokana dia tokony ahitana andiana tsanganana miampy ny isan'ny tsanganana misy azy. Ohatra, .span3tsanganana roa misy akany dia tokony hapetraka ao anatin'ny .span6.

<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>

Isan-jato, fa tsy pixel

Mampiasa isan-jato ho an'ny sakan'ny tsanganana fa tsy piksela raikitra ny rafi-pitantanana rano. Izy io koa dia manana fiovaovan'ny famaliana mitovy amin'ny rafi-pandaminana raikitra, miantoka ny taham-pahamendrehana ho an'ny fanapahan-kevitry ny efijery lehibe sy ny fitaovana.

Andalana ranon-javatra

Manaova fluide andalana rehetra amin'ny alàlan'ny fanovana fotsiny .rowamin'ny .row-fluid. Mitovy tanteraka ny tsanganana, ka mahatonga azy ho tena mahitsy ny mifamadika eo anelanelan'ny fisehon'ny raikitra sy ny fluid.

fanamarihana

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

Hafa kely ny fanatobiana miaraka amin'ny grids fluid: tsy mila mifanandrify amin'ny ray aman-dreny ny isan'ny tsanganana misy akany. Fa kosa, averina isaky ny ambaratonga ny tsangananao satria ny andalana tsirairay dia mandray 100% amin'ny tsanganana ray aman-dreny.

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

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 amin'ny 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 ihany koa ny grids amin'ny responsive.less.

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 azo leferina, sakan'ny min- sy max, ary 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 amin'ny rakitra tokana mba hanampiana ny tetikasanao ho mety kokoa amin'ny fitaovana samihafa sy ny famahana ny efijery. Ireto ny tafiditra ao:

Mitaky meta tag

Mba hahazoana antoka fa ny fitaovana dia mampiseho pejy mandray tsara, ampidiro ny meta tag viewport.

<meta name = "viewport" votoaty = "width=device-width, initial-scale=1.0" >  

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

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

1. Ampiasao ny dikan-teny mitambatra, bootstrap-responsive.css
2. Ampio @import "responsive.less" ary amboary indray ny Bootstrap
3. Ovao sy amboary indray ny responsive.less ho rakitra 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 : 980px ) { ... }        
 
  // Desktop lehibe
  @media ( min - sakany : 1200px ) { .. }