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.
Ang default na grid system na ibinigay bilang bahagi ng Bootstrap ay isang 940px-wide, 12-column grid .
Mayroon din itong apat na tumutugong variation para sa iba't ibang device at resolution: telepono, tablet portrait, table landscape at maliliit na desktop, at malalaking widescreen na desktop.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </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.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Gamit ang static (non-fluid) grid system sa Bootstrap, madali ang nesting. Upang i-nest ang iyong content, magdagdag lang ng bago .row
at hanay ng mga .span*
column sa loob ng isang kasalukuyang .span*
column.
Ang mga nested row ay dapat magsama ng isang hanay ng mga column na nagdaragdag ng hanggang sa bilang ng mga column ng magulang nito. Halimbawa, .span3
dapat ilagay ang dalawang nested column sa loob ng isang .span6
.
- <div class = "row" >
- <div class = "span12" >
- Level 1 ng column
- <div class = "row" >
- <div class = "span6" > Level 2 </div>
- <div class = "span6" > Level 2 </div>
- </div>
- </div>
- </div>
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.
Gumawa ng anumang row fluid sa pamamagitan lamang ng pagbabago .row
sa .row-fluid
. Ang mga column ay nananatiling eksaktong pareho, na ginagawa itong napakasimpleng mag-flip sa pagitan ng mga maayos at tuluy-tuloy na layout.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
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.
- <div class = "row-fluid" >
- <div class = "span12" >
- Level 1 ng column
- <div class = "row-fluid" >
- <div class = "span6" > Level 2 </div>
- <div class = "span6" > Level 2 </div>
- </div>
- </div>
- </div>
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 |
@siteWidth |
Computed sum ng lahat ng column at gutters | Binibilang ang bilang ng mga column at gutters upang itakda ang lapad ng .container-fixed() mixin |
Ang built in na Bootstrap ay ilang 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.
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.
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.
Ang default at simpleng 940px-wide, nakasentro na layout para sa halos anumang website o page na ibinigay ng iisang <div class="container">
.
- <katawan>
- <div class = "lalagyan" >
- ...
- </div>
- </body>
<div class="container-fluid">
nagbibigay ng nababaluktot na istraktura ng pahina, min- at max-width, at isang sidebar sa kaliwang bahagi. Mahusay ito para sa mga app at doc.
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Nilalaman sa sidebar-->
- </div>
- <div class = "span10" >
- <!--Nilalaman sa katawan-->
- </div>
- </div>
- </div>
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 | |
Portrait tablets | 480px hanggang 768px | Mga haligi ng likido, walang mga nakapirming lapad | |
Mga landscape na tablet | 768px hanggang 979px | 42px | 20px |
Default | 980px at pataas | 60px | 20px |
Malaking display | 1210px at pataas | 70px | 30px |
Para matiyak na ipinapakita ng mga device ang mga tumutugong page nang maayos, isama ang viewport meta tag.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
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-width
at max-width
.
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:
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.
- // Landscape phone at pababa
- @media ( max - width : 480px ) { ... }
- // Landscape na telepono sa portrait na tablet
- @media ( max - width : 768px ) { ... }
- // Portrait tablet sa landscape at desktop
- @media ( min - width : 768px ) at ( max - width : 980px ) { ... }
- // Malaking desktop
- @media ( min - lapad : 1200px ) { .. }