Scaffolding

Ang Bootstrap gitukod sa usa ka responsive nga 12-kolum nga grid. Among gilakip usab ang fixed- ug fluid-width nga mga layout base sa maong sistema.

Default nga 940px nga grid

Ang default grid system nga gihatag isip kabahin sa Bootstrap kay 940px-wide, 12-column grid .

Adunay usab kini upat ka mga responsive nga mga kalainan alang sa lainlaing mga aparato ug mga resolusyon: telepono, litrato sa tablet, talan-awon sa lamesa ug gagmay nga mga desktop, ug dagkong widescreen nga mga desktop.

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

Sama sa gipakita dinhi, ang usa ka sukaranan nga layout mahimong mahimo nga adunay duha ka "kolum," ang matag usa naglangkob sa usa ka gidaghanon sa 12 nga mga kolum sa pundasyon nga among gipasabut ingon bahin sa among sistema sa grid.

Pag-offset sa mga kolum

4 offset 4

3 offset 3

8 offset 4

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

Mga kolum nga nagsalag

Uban sa static (non-fluid) grid system sa Bootstrap, sayon ang pagpuga. Aron magsalag sa imong sulod, pagdugang lang ug bag-o .rowug set sa .span*mga column sulod sa kasamtangan nga .span*column.

Pananglitan

Level 1 sa kolum

Level 2

<div class = "row" > 
  <div class = "span12" > 
    Level 1 sa kolum
    <div class = "row" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

Pag-customize sa grid

Variable	Default nga bili	Deskripsyon
`@gridColumns`	12	Gidaghanon sa mga kolum
`@gridColumnWidth`	60px	Ang gilapdon sa matag kolum
`@gridGutterWidth`	20px	Negatibo nga luna tali sa mga kolum
`@siteWidth`	Computed sum sa tanang column ug gutters	Nag-ihap sa gidaghanon sa mga kolum ug mga kanal aron itakda ang gilapdon sa `.container-fixed()`mixin

Mga variable sa LESS

Gitukod sa Bootstrap ang pipila ka mga variable para sa pag-customize sa default 940px grid system, nga gidokumento sa ibabaw. Ang tanan nga mga variable para sa grid gitipigan sa variables.less.

Unsaon pag-customize

Ang pagbag-o sa grid nagpasabut sa pagbag-o sa tulo @grid*nga mga variable ug pag-recompile sa Bootstrap. Usba ang grid variables sa variables.less ug gamita ang usa sa upat ka paagi nga gidokumento sa pag-recompile . Kung magdugang ka ug dugang mga kolum, siguruha nga idugang ang CSS para sa mga naa sa grid.less.

Nagpabilin nga responsive

Ang pag-customize sa grid naglihok lamang sa default level, ang 940px grid. Aron mapadayon ang mga responsive nga aspeto sa Bootstrap, kinahanglan nimo nga i-customize ang grids sa responsive.less.

Naayo nga layout

Ang default ug yano nga 940px-wide, nakasentro nga layout alang sa bisan unsang website o panid nga gihatag sa usa ka <div class="container">.

<lawas>
  <div class = "sudlanan" > 
    ...
  </div>
</body>

Layout sa likido

<div class="container-fluid">naghatag og flexible page structure, min- ug max-widths, ug usa ka left-hand sidebar. Nindot kini para sa mga app ug docs.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Ang sulod sa sidebar-->
    </div>
    <div class = "span10" > 
      <!--Lawas nga sulod-->
    </div>
  </div>
</div>

Gisuportahan nga mga aparato

Gisuportahan sa Bootstrap ang pipila ka mga pangutana sa media aron matabangan ang paghimo sa imong mga proyekto nga mas angay sa lainlaing mga aparato ug mga resolusyon sa screen. Ania ang gilakip:

Label	Layout gilapdon	Lapad sa kolum	Lapad sa kanal
Mga smartphone	480px ug ubos pa	Mga kolum nga likido, walay gitakda nga gilapdon
Portrait nga mga tableta	480px hangtod sa 768px	Mga kolum nga likido, walay gitakda nga gilapdon
Landscape nga mga tablet	768px hangtod sa 940px	44px	20px
Default	940px ug pataas	60px	20px
Dako nga display	1210px ug pataas	70px	30px

Unsa ilang gibuhat

Gitugotan sa mga pangutana sa media ang custom CSS base sa ubay-ubay nga mga kondisyon—mga ratios, gilapdon, tipo sa display, ug uban pa—apan kasagaran nagtutok sa palibot min-widthug max-width.

Usba ang gilapdon sa kolum sa among grid
I-stack ang mga elemento imbes nga molutaw kung gikinahanglan
Usba ang gidak-on sa mga ulohan ug teksto aron mahimong mas angay alang sa mga himan

Paggamit sa mga pangutana sa media

Ang Bootstrap dili awtomatik nga naglakip niini nga mga pangutana sa media, apan ang pagsabut ug pagdugang niini sayon kaayo ug nagkinahanglan og gamay nga pag-setup. Adunay ka pipila ka mga kapilian alang sa paglakip sa mga responsive nga bahin sa Bootstrap:

Gamita ang gihugpong nga responsive nga bersyon, bootstrap-responsive.css
Idugang ang @import "responsive.less" ug i-recompile ang Bootstrap
Usba ug i-compile pag-usab ang responsive.less isip bulag

Nganong dili na lang iapil? Tinuod, dili tanan kinahanglan tubagon. Imbis nga awhagon ang mga developer nga tangtangon kini nga bahin, gihunahuna namon nga labing maayo nga mahimo kini.

  // Landscape nga mga telepono ug paubos
  @media ( max - gilapdon : 480px ) { ... }     
 
  // Landscape nga telepono ngadto sa portrait tablet
  @media ( max - gilapdon : 768px ) { ... }     
 
  // Portrait tablet ngadto sa talan-awon ug desktop
  @media ( min - gilapdon : 768px ) ug ( max - gilapdon : 940px ) { ... }        
 
  // Dako nga desktop
  @media ( min - gilapdon : 1200px ) { .. }