Bootstrap

plantsa

Ang Bootstrap ay binuo sa tumutugon na 12-column grids, layout, at mga bahagi.

Mga pandaigdigang setting

Nangangailangan ng HTML5 doctype

Gumagamit ang Bootstrap ng ilang partikular na elemento ng HTML at mga katangian ng CSS na nangangailangan ng paggamit ng HTML5 doctype. Isama ito sa simula ng lahat ng iyong proyekto.

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

Typography at mga link

Nagtatakda ang Bootstrap ng mga pangunahing global display, typography, at mga istilo ng link. Sa partikular, kami ay:

  • Tanggalin marginsa katawan
  • Itakda background-color: white;sabody
  • Gamitin ang @baseFontFamily, @baseFontSize, at mga @baseLineHeightkatangian bilang aming typographic base
  • Itakda ang pangkalahatang kulay ng link sa pamamagitan ng @linkColorat ilapat ang mga underline ng link sa:hover

Ang mga istilong ito ay makikita sa loob ng scaffolding.less .

I-reset sa pamamagitan ng Normalize

Sa Bootstrap 2, ang lumang reset block ay ibinaba pabor sa Normalize.css , isang proyekto nina Nicolas Gallagher at Jonathan Neal na nagpapagana din sa HTML5 Boilerplate . Habang ginagamit namin ang karamihan sa Normalize sa loob ng aming reset.less , inalis namin ang ilang elemento na partikular para sa Bootstrap.

Default na sistema ng grid

Halimbawa ng live na grid

Gumagamit ang default na Bootstrap grid system ng 12 column , na gumagawa para sa 940px na lapad na container nang hindi naka- enable ang mga feature na tumutugon . Sa idinagdag na tumutugon na CSS file, umaangkop ang grid upang maging 724px at 1170px ang lapad depende sa iyong viewport. Sa ibaba ng 767px na viewport, ang mga column ay nagiging tuluy-tuloy at nakasalansan nang patayo.

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

Pangunahing grid HTML

Para sa isang simpleng layout ng dalawang column, gumawa ng .rowat magdagdag ng naaangkop na bilang ng mga .span*column. Dahil isa itong 12-column grid, ang bawat .span*isa ay sumasaklaw sa isang bilang ng 12 column na iyon, at dapat palaging magdagdag ng hanggang 12 para sa bawat row (o ang bilang ng mga column sa parent).

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

Dahil sa halimbawang ito, mayroon kaming .span4at .span8, na gumagawa para sa 12 kabuuang hanay at isang kumpletong hilera.

Pag-offset ng mga column

Ilipat ang mga column sa kanan gamit ang mga .offset*klase. Ang bawat klase ay nagdaragdag sa kaliwang margin ng isang column ng isang buong column. Halimbawa, .offset4gumagalaw .span4sa apat na column.

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

Upang i-nest ang iyong content sa default na grid, magdagdag ng bago .rowat hanay ng mga .span*column sa loob ng isang kasalukuyang .span*column. Dapat na may kasamang hanay ng mga column ang mga nested row na nagdaragdag sa bilang ng mga column ng parent nito.

Level 1 column
Level 2
Level 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Level 1 column
  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 ng fluid grid

Halimbawa ng live na fluid grid

Gumagamit ang fluid grid system ng mga porsyento sa halip na mga pixel para sa mga lapad ng column. Mayroon itong parehong kakayahang tumutugon gaya ng aming fixed grid system, na tinitiyak ang tamang proporsyon para sa mga pangunahing resolution ng screen at device.

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

Basic fluid grid HTML

Gawing "fluid" ang anumang row sa pamamagitan ng pagbabago .rowsa .row-fluid. Ang mga klase ng column ay nananatiling eksaktong pareho, na ginagawang madali ang pag-flip sa pagitan ng mga fixed at fluid na grid.

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

Pag-offset ng likido

Gumagana sa parehong paraan tulad ng pag-offset ng fixed grid system: idagdag .offset*sa anumang column upang i-offset ng ganoon karaming column.

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

Fluid nesting

Ang mga fluid grid ay gumagamit ng nesting sa ibang paraan: ang bawat nested na antas ng mga column ay dapat magdagdag ng hanggang 12 column. Ito ay dahil ang tuluy-tuloy na grid ay gumagamit ng mga porsyento, hindi mga pixel, para sa pagtatakda ng mga lapad.

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

Nakapirming layout

Nagbibigay ng karaniwang fixed-width (at opsyonal na tumutugon) na layout na <div class="container">kailangan lang.

  1. <katawan>
  2.   <div class = "lalagyan" > 
  3.     ...
  4.   </div>
  5. </body>

Layout ng likido

Gumawa ng tuluy-tuloy, dalawang column na page na may <div class="container-fluid">—mahusay para sa mga application at doc.

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

Tumutugon na disenyo

Paganahin ang mga feature na tumutugon

I-on ang tumutugong CSS sa iyong proyekto sa pamamagitan ng pagsasama ng wastong meta tag at karagdagang stylesheet sa loob <head>ng iyong dokumento. Kung nag-compile ka ng Bootstrap mula sa page na I-customize, kailangan mo lang isama 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" >

Heads up!Hindi kasama sa Bootstrap ang mga tumutugong feature bilang default sa ngayon dahil hindi lahat ay kailangang tumutugon. Sa halip na hikayatin ang mga developer na alisin ang feature na ito, iniisip namin na pinakamahusay na paganahin ito kung kinakailangan.

Tungkol sa tumutugon na Bootstrap

Mga aparatong tumutugon

Nagbibigay-daan ang mga query sa media para sa custom na CSS batay sa ilang kundisyon—mga ratio, lapad, uri ng display, atbp—ngunit kadalasang nakatutok sa paligid min-widthat max-width.

  • Baguhin ang lapad ng column sa aming grid
  • I-stack ang mga elemento sa halip na float kung saan kinakailangan
  • Baguhin ang laki ng mga heading at text upang maging mas naaangkop para sa mga device

Gumamit ng mga query sa media nang responsable at bilang panimula lamang sa iyong mga madla sa mobile. Para sa mas malalaking proyekto, isaalang-alang ang nakalaang mga base ng code at hindi ang mga layer ng mga query sa media.

Mga sinusuportahang device

Sinusuportahan ng Bootstrap ang ilang mga query sa media sa isang file upang makatulong na gawing mas naaangkop ang iyong mga proyekto sa iba't ibang device at resolution ng screen. Narito kung ano ang kasama:

Label Lapad ng layout Lapad ng haligi Lapad ng kanal
Malaking display 1200px at pataas 70px 30px
Default 980px at pataas 60px 20px
Portrait tablets 768px at mas mataas 42px 20px
Mga telepono sa mga tablet 767px at mas mababa Mga haligi ng likido, walang mga nakapirming lapad
Mga telepono 480px at mas mababa Mga haligi ng likido, walang mga nakapirming lapad 
  1. /* Malaking desktop */
  2. @media ( min - lapad : 1200px ) { ... }     
  3.  
  4. /* Portrait tablet sa landscape at desktop */
  5. @media ( min - width : 768px ) at ( max - width : 979px ) { ... }        
  6.  
  7. /* Landscape na telepono sa portrait na tablet */
  8. @media ( max - width : 767px ) { ... }     
  9.  
  10. /* Landscape phone at pababa */
  11. @media ( max - width : 480px ) { ... }

Mga klase ng tumutugon na utility

Para sa mas mabilis na pag-develop sa mobile, gamitin ang mga utility class na ito para sa pagpapakita at pagtatago ng content ayon sa device. Nasa ibaba ang isang talahanayan ng mga available na klase at ang epekto ng mga ito sa isang ibinigay na layout ng query ng media (na may label na ayon sa device). Matatagpuan ang mga ito sa responsive.less.

Klase Mga telepono767px at mas mababa Mga tableta979px hanggang 768px Mga desktopDefault
.visible-phone Nakikita
.visible-tablet Nakikita
.visible-desktop Nakikita
.hidden-phone Nakikita Nakikita
.hidden-tablet Nakikita Nakikita
.hidden-desktop Nakikita Nakikita

Kailan gagamitin

Gamitin sa limitadong batayan at iwasang gumawa ng ganap na magkakaibang mga bersyon ng parehong site. Sa halip, gamitin ang mga ito upang umakma sa presentasyon ng bawat device. Ang mga tumutugon na kagamitan ay hindi dapat gamitin kasama ng mga talahanayan, at dahil dito ay hindi suportado.

Test case ng tumutugon na mga utility

Baguhin ang laki ng iyong browser o mag-load sa iba't ibang device upang subukan ang mga klase sa itaas.

Nakikita sa...

Ang mga berdeng checkmark ay nagpapahiwatig na ang klase ay nakikita sa iyong kasalukuyang viewport.

  • Telepono✔ Telepono
  • Tableta✔ Tablet
  • Desktop✔ Desktop

Nakatago sa...

Dito, ipinapahiwatig ng mga berdeng checkmark na nakatago ang klase sa iyong kasalukuyang viewport.

  • Telepono✔ Telepono
  • Tableta✔ Tablet
  • Desktop✔ Desktop