Bootstrap

Scaffolding

Ang Bootstrap gitukod sa responsive nga 12 ka kolum nga grids, mga layout, ug mga sangkap.

Taas ang ulo! Kini nga mga dokumento alang sa v2.3.2, nga dili na opisyal nga suportado. Tan-awa ang pinakabag-o nga bersyon sa Bootstrap!

Mga setting sa kalibutan

Nagkinahanglan ug HTML5 doctype

Ang Bootstrap naggamit sa pipila ka mga elemento sa HTML ug CSS nga mga kabtangan nga nagkinahanglan sa paggamit sa HTML5 doctype. Ilakip kini sa sinugdanan sa tanan nimong mga proyekto.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typography ug mga link

Ang Bootstrap nagtakda sa sukaranan nga global nga pagpakita, typography, ug mga istilo sa link. Sa partikular, kami:

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

Kini nga mga estilo makita sulod sa scaffolding.less .

I-reset pinaagi sa Normalize

Uban sa Bootstrap 2, ang daan nga reset block gihulog pabor sa Normalize.css , usa ka proyekto ni Nicolas Gallagher ug Jonathan Neal nga nagpalihok usab sa HTML5 Boilerplate . Samtang gigamit namo ang kadaghanan sa Normalize sulod sa among reset.less , among gikuha ang pipila ka mga elemento ilabi na alang sa Bootstrap.

Default nga sistema sa grid

Pananglitan sa live grid

Ang default nga Bootstrap grid system naggamit ug 12 ka kolum , nga naghimo sa 940px nga lapad nga sudlanan nga walay responsive nga mga feature nga gipagana . Uban sa responsive CSS file nga gidugang, ang grid mopahiangay nga mahimong 724px ug 1170px ang gilapdon depende sa imong viewport. Ubos sa 767px nga mga viewport, ang mga kolum mahimong likido ug stack nga patindog.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Batakang grid HTML

Alang sa usa ka yano nga layout sa duha ka kolum, paghimo ug .rowug idugang ang angay nga gidaghanon sa .span*mga kolum. Tungod kay kini usa ka 12 ka kolum nga grid, ang matag usa .span*nagsangkap sa usa ka gidaghanon sa mga 12 nga kolum, ug kinahanglan kanunay nga magdugang hangtod sa 12 alang sa matag laray (o ang gidaghanon sa mga kolum sa ginikanan).

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

Gihatag kini nga pananglitan, kita adunay .span4ug .span8, nga naghimo alang sa 12 ka kinatibuk-ang mga kolum ug usa ka kompleto nga laray.

Pag-offset sa mga kolum

Ibalhin ang mga kolum sa tuo gamit ang .offset*mga klase. Ang matag klase nagdugang sa wala nga margin sa usa ka kolum sa usa ka tibuuk nga kolum. Pananglitan, .offset4naglihok .span4sa upat ka mga kolum.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Mga kolum nga nagsalag

Aron ibutang ang imong sulod sa default grid, pagdugang og bag-o .rowug set sa .span*mga column sulod sa kasamtangan nga .span*column. Ang mga nested row kinahanglang maglakip ug set sa mga column nga modugang sa gidaghanon sa column sa ginikanan niini.

Level 1 nga kolum
Level 2
Level 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Level 1 nga kolum
  4.     <div class = "row" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema sa fluid grid

Pananglitan sa live fluid grid

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

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

Basic nga fluid grid HTML

Paghimo og bisan unsang laray nga "fluid" pinaagi sa pag-ilis .rowsa .row-fluid. Ang mga klase sa kolum nagpabilin nga parehas, nga nagpadali sa pag-flip tali sa naayos ug likido nga mga grids.

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

Pag-offset sa likido

Naglihok sa parehas nga paagi sa pag-offset sa fixed grid system: idugang .offset*sa bisan unsang kolum aron ma-offset sa daghang mga kolum.

4
4 offset 4
3 offset 3
3 offset 3
6 puli 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Pagsalag sa likido

Ang fluid grids naggamit ug nesting sa lahi nga paagi: ang matag nested level sa columns kinahanglang magdugang ug 12 ka column. Kini tungod kay ang fluid grid naggamit sa mga porsyento, dili mga pixel, alang sa pagtakda sa mga gilapdon.

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Fluid 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Fluid 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Mga Layout

Naayo nga layout

Naghatag usa ka sagad nga fixed-width (ug opsyonal nga responsive) nga layout nga <div class="container">gikinahanglan lamang.

  1. <lawas>
  2.   <div class = "sudlanan" > 
  3.     ...
  4.   </div>
  5. </body>

Layout sa likido

Paghimo usa ka pluwido, duha ka kolum nga panid nga adunay <div class="container-fluid">—maayo alang sa mga aplikasyon ug mga dokumento.

  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>

Responsive nga disenyo

Pag-enable sa mga responsive nga bahin

I-on ang responsive CSS sa imong proyekto pinaagi sa paglakip sa tukma nga meta tag ug dugang nga stylesheet sulod <head>sa imong dokumento. Kung imong gi-compile ang Bootstrap gikan sa Customize nga panid, kinahanglan nimo nga ilakip ang meta tag.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Taas ang ulo!Ang Bootstrap wala maglakip sa mga responsive nga bahin pinaagi sa default niining panahona tungod kay dili tanan kinahanglan nga responsive. Imbis nga awhagon ang mga developer nga tangtangon kini nga bahin, gihunahuna namon nga labing maayo nga mahimo kini kung gikinahanglan.

Mahitungod sa responsive nga Bootstrap

Responsive nga mga himan

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
Dako nga display 1200px ug pataas 70px 30px
Default 980px ug pataas 60px 20px
Portrait nga mga tableta 768px ug pataas 42px 20px
Mga telepono ngadto sa mga tablet 767px ug sa ubos Mga kolum nga likido, walay gitakda nga gilapdon
Mga telepono 480px ug ubos pa Mga kolum nga likido, walay gitakda nga gilapdon 
  1. /* Dako nga desktop */
  2. @media ( min - gilapdon : 1200px ) { ... }     
  3.  
  4. /* Portrait tablet ngadto sa talan-awon ug desktop */
  5. @media ( min - gilapdon : 768px ) ug ( max - gilapdon : 979px ) { ... }        
  6.  
  7. /* Landscape nga telepono ngadto sa portrait tablet */
  8. @media ( max - gilapdon : 767px ) { ... }     
  9.  
  10. /* Landscape phone ug down */
  11. @media ( max - gilapdon : 480px ) { ... }

Responsive nga mga klase sa utility

Para sa mas paspas nga mobile-friendly nga kalamboan, gamita kini nga mga klase sa utility para sa pagpakita ug pagtago sa sulod pinaagi sa device. Sa ubos usa ka lamesa sa magamit nga mga klase ug ang ilang epekto sa gihatag nga layout sa pangutana sa media (gimarkahan sa aparato). Makit-an sila sa responsive.less.

Klase Mga telepono767px ug sa ubos Mga papan979px hangtod sa 768px Mga desktopDefault
.visible-phone Makita
.visible-tablet Makita
.visible-desktop Makita
.hidden-phone Makita Makita
.hidden-tablet Makita Makita
.hidden-desktop Makita Makita

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. Ang mga responsive utilities kinahanglan dili gamiton sa mga lamesa, ug sa ingon dili suportado.

Responsive nga mga utilities test case

I-resize ang imong browser o i-load sa lain-laing mga device 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