Bootstrap

plantsa

Ang Bootstrap ay binuo sa isang tumutugon na 12-column grid. Nagsama rin kami ng mga fixed- at fluid-width na layout batay sa system na iyon.

Mga pandaigdigang istilo para sa pag-reset ng CSS, typography, at mga link

Nangangailangan ng HTML5 doctype

Gumagamit ang Bootstrap ng mga elemento ng HTML at mga katangian ng CSS na nangangailangan ng paggamit ng HTML5 doctype. Tiyaking isama ito sa simula ng bawat pahina ng Bootstrapped sa iyong proyekto.

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

Typography at mga link

Sa loob ng scaffolding.less na file, nagtakda kami ng mga pangunahing global display, typography, at mga istilo ng link. Sa partikular, kami ay:

  • Alisin ang margin sa katawan
  • Itakda background-color: white;sabody
  • Gamitin ang @baseFontFamily, @baseFontSize, at mga @baseLineHeightkatangian bilang aming typographyic base
  • Itakda ang pandaigdigang kulay ng link sa pamamagitan ng @linkColorat ilapat ang mga underline ng link sa:hover

I-reset sa pamamagitan ng Normalize

Simula sa Bootstrap 2, ang tradisyunal na pag-reset ng CSS ay nagbago upang magamit ang mga elemento mula sa Normalize.css , isang proyekto ni Nicolas Gallagher na nagpapagana din sa HTML5 Boilerplate .

Ang bagong pag-reset ay makikita pa rin sa reset.less , ngunit may maraming elementong inalis para sa ikli at katumpakan.

Default na grid system 12 column na may tumutugon na twist

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

Ang default na grid system na ibinigay sa Bootstrap ay gumagamit ng 12 column na nagre-render sa lapad na 724px, 940px (default na walang tumutugon na CSS kasama), at 1170px. Sa ibaba ng 767px na viewport, ang mga column ay nagiging tuluy-tuloy at nakasalansan nang patayo.

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

Gaya ng ipinapakita dito, maaaring gumawa ng pangunahing layout gamit ang dalawang "column", bawat isa ay sumasaklaw sa isang bilang ng 12 foundational na column na tinukoy namin bilang bahagi ng aming grid system.


Pag-offset ng mga column

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

Gamit ang static (non-fluid) grid system sa Bootstrap, madali ang nesting. Upang i-nest ang iyong content, magdagdag lang ng bago .rowat hanay ng mga .span*column sa loob ng isang kasalukuyang .span*column.

Halimbawa

Ang mga nested row ay dapat na may kasamang hanay ng mga column na nagdaragdag ng hanggang sa bilang ng mga column ng magulang nito. Halimbawa, .span3dapat ilagay ang dalawang nested column sa loob ng isang .span6.

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

Fluid grid system 12 tumutugon, mga column na nakabatay sa porsyento

Mga haligi ng likido

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

Mga porsyento, hindi mga pixel

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

Mga hilera ng likido

Gumawa ng anumang row fluid sa pamamagitan lamang ng pagbabago .rowsa .row-fluid. Ang mga column ay nananatiling eksaktong pareho, na ginagawang napakasimpleng mag-flip sa pagitan ng mga maayos at tuluy-tuloy na layout.

Markup

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

Fluid nesting

Ang nesting na may fluid grids ay medyo naiiba: ang bilang ng mga nested column ay hindi kailangang tumugma sa magulang. Sa halip, ni-reset ang iyong mga column sa bawat antas dahil ang bawat row ay tumatagal ng 100% ng parent na column.

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

Variable Default na halaga Paglalarawan
@gridColumns 12 Bilang ng mga column
@gridColumnWidth 60px Lapad ng bawat column
@gridGutterWidth 20px Negatibong espasyo sa pagitan ng mga column

Mga variable sa LESS

Built in Bootstrap ay isang maliit na bilang ng mga variable para sa pag-customize ng default na 940px grid system, na nakadokumento sa itaas. Ang lahat ng mga variable para sa grid ay naka-imbak sa mga variable.less.

Paano i-customize

Ang pagbabago sa grid ay nangangahulugan ng pagbabago sa tatlong @grid*variable at muling pag-compile ng Bootstrap. Baguhin ang mga variable ng grid sa variables.less at gamitin ang isa sa apat na paraan na nakadokumento upang muling mag-compile . Kung nagdaragdag ka ng higit pang mga column, tiyaking idagdag ang CSS para sa mga nasa grid.less.

Nananatiling tumutugon

Gumagana lamang ang pag-customize ng grid sa default na antas, ang 940px na grid. Upang mapanatili ang mga tumutugong aspeto ng Bootstrap, kakailanganin mo ring i-customize ang mga grid sa responsive.less.

Mga Layout Pangunahing template upang lumikha ng mga webpage

Nakapirming layout

Ang default at simpleng 940px-wide, nakasentro na layout para sa halos anumang website o page na ibinigay ng iisang <div class="container">.

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

Layout ng likido

<div class="container-fluid">nagbibigay ng nababaluktot na istraktura ng pahina, min- at max-width, at isang sidebar sa kaliwang bahagi. Ito ay mahusay para sa mga app 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 sa disenyo Mga query sa media para sa iba't ibang device at resolution

Mga aparatong tumutugon

Ano ang ginagawa nila

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
Mga smartphone 480px at mas mababa Mga haligi ng likido, walang mga nakapirming lapad
Mga smartphone hanggang sa mga tablet 767px at mas mababa Mga haligi ng likido, walang mga nakapirming lapad
Portrait tablets 768px at mas mataas 42px 20px
Default 980px at pataas 60px 20px
Malaking display 1200px at pataas 70px 30px

Nangangailangan ng meta tag

Para matiyak na ipinapakita ng mga device ang mga tumutugong page nang maayos, isama ang viewport meta tag.

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

Gamit ang mga query sa media

Hindi awtomatikong isinasama ng Bootstrap ang mga media query na ito, ngunit ang pag-unawa at pagdaragdag sa mga ito ay napakadali at nangangailangan ng kaunting setup. Mayroon kang ilang mga opsyon para sa pagsasama ng mga tumutugon na feature ng Bootstrap:

  1. Gamitin ang pinagsama-samang tumutugon na bersyon, bootstrap-responsive.css
  2. Idagdag ang @import "responsive.less" at i-compile muli ang Bootstrap
  3. Baguhin at i-compile ang responsive.less bilang isang hiwalay na file

Bakit hindi na lang isama? Sa totoo lang, hindi lahat ng bagay ay kailangang tumugon. Sa halip na hikayatin ang mga developer na alisin ang feature na ito, iniisip namin na pinakamahusay na paganahin ito.

  1.   /* Landscape phone at pababa */
  2.   @media ( max - lapad : 480px ) { ... }     
  3.  
  4.   /* Landscape na telepono sa portrait na tablet */
  5.   @media ( max - width : 767px ) { ... }     
  6.  
  7.   /* Portrait tablet sa landscape at desktop */
  8.   @media ( min - width : 768px ) at ( max - width : 979px ) { ... }        
  9.  
  10.   /* Malaking desktop */
  11.   @media ( min - lapad : 1200px ) { ... }

Mga klase ng tumutugon na utility

Ano sila

Para sa mas mabilis na pag-develop sa mobile, gamitin ang mga pangunahing klase ng utility na ito para sa pagpapakita at pagtatago ng content ayon sa device.

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.

Halimbawa, maaari kang magpakita ng <select>elemento para sa nav sa mga mobile na layout, ngunit hindi sa mga tablet o desktop.

Suporta sa mga klase

Ipinapakita dito ang isang talahanayan ng mga klase na sinusuportahan namin 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 telepono480px at mas mababa Mga tableta767px at mas mababa Mga desktop768px at mas mataas
.visible-phone Nakikita
.visible-tablet Nakikita
.visible-desktop Nakikita
.hidden-phone Nakikita Nakikita
.hidden-tablet Nakikita Nakikita
.hidden-desktop Nakikita Nakikita

Test case

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, ang mga berdeng checkmark ay nagpapahiwatig na ang klase ay nakatago sa iyong kasalukuyang viewport.

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