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.

Nagkinahanglan ug HTML5 doctype

Ang Bootstrap naggamit sa HTML nga mga elemento ug CSS nga mga kabtangan nga nagkinahanglan sa paggamit sa HTML5 doctype. Siguroha nga iapil kini sa sinugdanan sa matag Bootstrapped nga panid sa imong proyekto.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Typography ug mga link

Sulod sa scaffolding.less nga payl, nagbutang mi og sukaranang global display, typography, ug mga estilo sa link. Sa partikular, kami:

Kuhaa ang margin sa lawas
Ibutang background-color: white;sabody
Gamita ang @baseFontFamily, @baseFontSize, ug @baseLineHeightmga attribute isip among typographyic base
Itakda ang global nga kolor sa link pinaagi sa @linkColorug i-apply ang link underlines lamang sa:hover

I-reset pinaagi sa Normalize

Ingon sa Bootstrap 2, ang tradisyonal nga CSS reset milambo aron magamit ang mga elemento gikan sa Normalize.css , usa ka proyekto ni Nicolas Gallagher nga nagpalihok usab sa HTML5 Boilerplate .

Ang bag-ong pag-reset makita gihapon sa reset.less , apan adunay daghang mga elemento nga gikuha alang sa mubo ug tukma.

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

Ang mga nested row kinahanglang maglakip ug set sa mga column nga modugang sa gidaghanon sa column sa ginikanan niini. Pananglitan, ang duha ka nested .span3column kinahanglang ibutang sulod sa usa ka .span6.

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>

Mga kolum sa likido

Mga porsyento, dili mga pixel

Ang sistema sa fluid grid naggamit sa mga porsyento alang sa mga gilapdon sa kolum imbes sa mga fixed pixel. Kini usab adunay parehas nga responsive nga mga kalainan sama sa among fixed grid system, nga nagsiguro sa husto nga proporsyon alang sa mga yawe nga mga resolusyon sa screen ug mga himan.

Mga linya sa likido

Paghimo og bisan unsang row fluid pinaagi lang sa pag-ilis .rowsa .row-fluid. Ang mga kolum nagpabilin nga parehas, nga naghimo niini nga labi ka prangka sa pag-flip tali sa naayos ug likido nga mga layout.

Markup

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

Pagsalag sa likido

Ang pagsalag gamit ang fluid grids medyo lahi: ang gidaghanon sa mga nested column dili kinahanglan nga motakdo sa ginikanan. Hinuon, ang imong mga kolum gi-reset sa matag lebel tungod kay ang matag laray mokuha sa 100% sa ginikanan nga kolum.

Fluid 12

Fluid 6

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

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>

Responsive nga mga himan

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

Gamita ang mga pangutana sa media nga responsable ug isip usa lamang ka pagsugod sa imong mobile audience. Alang sa dagkong mga proyekto, ikonsiderar ang gipahinungod nga mga base sa code ug dili mga layer sa mga pangutana sa media.

Gisuportahan nga mga aparato

Gisuportahan sa Bootstrap ang pipila ka mga pangutana sa media sa usa ka file aron matabangan ang paghimo sa imong mga proyekto nga labi ka 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
Mga smartphone hangtod sa mga tablet	767px ug sa ubos	Mga kolum nga likido, walay gitakda nga gilapdon
Portrait nga mga tableta	768px ug pataas	42px	20px
Default	980px ug pataas	60px	20px
Dako nga display	1200px ug pataas	70px	30px

Nagkinahanglan og meta tag

Aron maseguro nga ang mga himan magpakita sa mga responsive nga panid sa hustong paagi, ilakip ang viewport meta tag.

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

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

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 : 980px ) { ... }        
 
  // Dako nga desktop
  @media ( min - gilapdon : 1200px ) { .. }

Responsive nga mga klase sa utility

Unsa sila

Para sa mas paspas nga mobile-friendly nga kalamboan, gamita kining mga batakang klase sa utility para sa pagpakita ug pagtago sa sulod pinaagi sa device.

Kanus-a gamiton

Paggamit sa usa ka limitado nga basehan ug likayi ang paghimo sa hingpit nga lainlaing mga bersyon sa parehas nga site. Hinunoa, gamita kini aron makadugang sa presentasyon sa matag device.

Pananglitan, mahimo nimong ipakita ang usa ka <select>elemento para sa nav sa mga layout sa mobile, apan dili sa mga tablet o desktop.

Pagsuporta sa mga klase

Gipakita dinhi ang usa ka lamesa sa mga klase nga among gisuportahan ug ang epekto niini sa gihatag nga layout sa pangutana sa media (gimarkahan sa aparato). Makit-an sila sa responsive.less.

Klase	Mga telepono480px ug ubos pa	Mga papan767px ug sa ubos	Mga desktop768px ug pataas
`.visible-phone`	Makita	Gitagoan	Gitagoan
`.visible-tablet`	Gitagoan	Makita	Gitagoan
`.visible-desktop`	Gitagoan	Gitagoan	Makita
`.hidden-phone`	Gitagoan	Makita	Makita
`.hidden-tablet`	Makita	Gitagoan	Makita
`.hidden-desktop`	Makita	Makita	Gitagoan

Kaso sa pagsulay

I-resize ang imong browser o i-load sa lain-laing mga device aron masulayan ang mga klase sa ibabaw.

Makita sa...

Telepono✔ Telepono
tableta✔ tableta
Desktop✔ Desktop

Gitago sa...

Telepono✔ Telepono
tableta✔ tableta
Desktop✔ Desktop