Bootstrap

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.

Global nga mga estilo para sa CSS reset, typography, ug mga link

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.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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.

Default nga sistema sa grid 12 ka kolum nga adunay responsive twist

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Ang default nga sistema sa grid nga gihatag sa Bootstrap naggamit sa 12 ka mga kolum nga nag-render sa gilapdon nga 724px, 940px (default nga wala’y responsive CSS nga gilakip), ug 1170px. Ubos sa 767px nga mga viewport, ang mga kolum mahimong likido ug stack nga patindog.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


Pag-offset sa mga kolum

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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
Level 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     Level 1 nga kolum
  4.     <div class = "row" > 
  5.       <div class = "span3" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema sa fluid grid 12 nga responsive, mga kolum nga nakabase sa porsyento

Mga kolum sa likido

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Fluid 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Level 1 sa kolum
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </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

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.

Mga Layout Basic nga mga templates aron makahimo og mga webpage

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

  1. <lawas>
  2.   <div class = "sudlanan" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Ang sulod sa sidebar-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Lawas nga sulod-->
  8.     </div>
  9.   </div>
  10. </div>

Matubag nga disenyo Mga pangutana sa media alang sa lainlaing mga aparato ug resolusyon

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.

  1. <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:

  1. Gamita ang gihugpong nga responsive nga bersyon, bootstrap-responsive.css
  2. Idugang ang @import "responsive.less" ug i-recompile ang Bootstrap
  3. 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.

  1.   /* Landscape phone ug down */
  2.   @media ( max - gilapdon : 480px ) { ... }     
  3.  
  4.   /* Landscape nga telepono ngadto sa portrait tablet */
  5.   @media ( max - gilapdon : 767px ) { ... }     
  6.  
  7.   /* Portrait tablet ngadto sa talan-awon ug desktop */
  8.   @media ( min - gilapdon : 768px ) ug ( max - gilapdon : 979px ) { ... }        
  9.  
  10.   /* Dako nga desktop */
  11.   @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
.visible-tablet Makita
.visible-desktop Makita
.hidden-phone Makita Makita
.hidden-tablet Makita Makita
.hidden-desktop Makita Makita

Kaso sa pagsulay

I-resize ang imong browser o i-load sa lainlaing mga aparato aron masulayan ang mga klase sa ibabaw.

Makita sa...

Ang berde nga marka sa tsek nagpakita nga ang klase makita sa imong karon nga viewport.

  • Telepono✔ Telepono
  • tableta✔ tableta
  • Desktop✔ Desktop

Gitago sa...

Dinhi, ang berde nga mga checkmark nagpakita nga ang klase gitago sa imong karon nga viewport.

  • Telepono✔ Telepono
  • tableta✔ tableta
  • Desktop✔ Desktop