Bootstrap

Pākuʻi

Hoʻokumu ʻia ʻo Bootstrap ma luna o nā kolamu kolamu 12 pane, hoʻonohonoho, a me nā ʻāpana.

Nā hoʻonohonoho honua

Pono HTML5 doctype

Hoʻohana ʻo Bootstrap i kekahi mau mea HTML a me nā waiwai CSS e koi ai i ka hoʻohana ʻana i ka HTML5 doctype. E hoʻokomo iā ia ma ka hoʻomaka o kāu mau papahana a pau.

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

Typography a me nā loulou

Hoʻonohonoho ʻo Bootstrap i ka hōʻike honua maʻamau, typography, a me nā ʻano loulou. ʻOiaʻiʻo, mākou:

  • Wehe marginma ke kino
  • Kau background-color: white;ma kabody
  • E hoʻohana i ka @baseFontFamily, @baseFontSize, a me @baseLineHeightnā hiʻohiʻona e like me kā mākou kumu kikokikona
  • E hoʻonoho i ka waihoʻoluʻu loulou honua ma o @linkColora hoʻopili i nā kaha lalo ma ka loulou:hover

Hiki ke loaʻa kēia mau ʻano i loko o ka scaffolding.less .

Hoʻoponopono hou ma o Normalize

Me Bootstrap 2, ua hoʻokuʻu ʻia ka poloka hoʻonohonoho kahiko i makemake ʻia Normalize.css , kahi papahana e Nicolas Gallagher a me Jonathan Neal e mana pū ana i ka HTML5 Boilerplate . ʻOiai mākou e hoʻohana nui i ka Normalize i loko o kā mākou reset.less , ua wehe mākou i kekahi mau mea kikoʻī no Bootstrap.

Pūnaehana mānoanoa paʻamau

Laʻana mānoanoa ola

Hoʻohana ka ʻōnaehana mākia Bootstrap i nā kolamu 12 , e hana ana i kahi ipu ākea 940px me ka ʻole o nā hiʻohiʻona pane . Me ka waihona CSS pane i hoʻohui ʻia, hoʻololi ka mākia i 724px a me 1170px ākea ma muli o kāu viewport. Ma lalo o 767px viewports, lilo nā kolamu i ka wai a hoʻopaʻa pololei.

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

HTML mānoanoa kumu

No kahi hoʻolālā kolamu maʻalahi ʻelua, hana i kahi .rowa hoʻohui i ka helu kūpono o .span*nā kolamu. No ka mea, he 12 mau kolamu kēia, e .span*kau ana kēlā me kēia kolamu i ka helu o ia mau kolamu 12, a pono e hoʻohui mau i 12 no kēlā me kēia lālani (a i ʻole ka helu o nā kolamu ma ka makua).

  1. <div class = "lālani" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Hāʻawi ʻia i kēia laʻana, loaʻa iā mākou .span4a me .span8, e hana ana i 12 mau kolamu a me kahi lālani piha.

Hoʻopio i nā kolamu

E hoʻoneʻe i nā kolamu i ka ʻākau me ka hoʻohana ʻana i .offset*nā papa. Hoʻonui kēlā me kēia papa i ka ʻaoʻao hema o kahi kolamu me kahi kolamu holoʻokoʻa. No ka laʻana, .offset4neʻe .span4ma luna o ʻehā kolamu.

4
3 hoʻopau 2
3 hoʻopau 1
3 hoʻopau 2
6 hoʻopau 3 
  1. <div class = "lālani" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Nā kolamu nesting

No ka hoʻopili ʻana i kāu ʻike me ka mākia paʻamau, e hoʻohui i kahi kolamu hou .rowa me .span*nā kolamu i loko o kahi .span*kolamu e kū nei. Pono nā lālani i hoʻopaʻa ʻia he pūʻulu kolamu e hoʻohui i ka helu o nā kolamu o kona makua.

pae 1 kolamu
Papa 2
Papa 2 
  1. <div class = "lālani" > 
  2.   <div class = "span9" > 
  3.     pae 1 kolamu
  4.     <div class = "lālani" > 
  5.       <div class = "span6" > Papa 2 </div> 
  6.       <div class = "span3" > Papa 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Pūnaehana mānoanoa wai

ʻO ka laʻana hoʻoheheʻe wai ola

Hoʻohana ka ʻōnaehana mānoanoa wai i nā pākēneka ma kahi o nā pika no ka laulā kolamu. Loaʻa iā ia nā mana pane like me kā mākou ʻōnaehana grid paʻa, e hōʻoiaʻiʻo ana i nā ʻāpana kūpono no nā ʻōkuhi pale kī a me nā mea hana.

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

HTML puna wai kumu

Hana i kekahi lālani "wai" ma ka hoʻololi .rowʻana i .row-fluid. Noho like nā papa kolamu, e maʻalahi ka hoʻololi ʻana ma waena o nā grids paʻa a me ka wai.

  1. <div class = "laina-wai" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Hoʻopiʻi wai

Hoʻohana like me ka hoʻololi ʻana i ka ʻōnaehana mākia paʻa: hoʻohui .offset*i kekahi kolamu e hoʻopau ʻia e kēlā kolamu he nui.

4
4 hoʻopau 4
3 offset 3
3 offset 3
6 hoʻopau 6 
  1. <div class = "laina-wai" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

ʻO ka pūnana wai

Hoʻohana ʻokoʻa ka hoʻohana ʻana i nā pūnana wai: pono e hoʻohui i kēlā me kēia pae o nā kolamu i 12 kolamu. ʻO kēia no ka hoʻohana ʻana o ka pā wai i nā pākēneka, ʻaʻole nā ​​pika, no ka hoʻonohonoho ʻana i nā laula.

Waiwai 12
Waiwai 6
Waiwai 6
Waiwai 6
Waiwai 6 
  1. <div class = "laina-wai" > 
  2.   <div class = "span12" > 
  3.     Waiwai 12
  4.     <div class = "laina-wai" > 
  5.       <div class = "span6" > 
  6.         Waiwai 6
  7.         <div class = "laina-wai" > 
  8.           <div class = "span6" > Wai 6 </div> 
  9.           <div class = "span6" > Wai 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Wai 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Nā hoʻolālā

Hoʻolālā paʻa

Hāʻawi i kahi hoʻolālā laulā paʻa maʻamau (a me ke koho koho) me ka mea <div class="container">pono wale nō.

  1. <kino>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </kino>

Hoʻolālā wai

E hana i kahi ʻaoʻao wai, ʻelua kolamu me <div class="container-fluid">- maikaʻi no nā noi a me nā palapala.

  1. <div class = "container-fluid" > 
  2.   <div class = "laina-wai" > 
  3.     <div class = "span2" > 
  4.       <!--Maʻiʻo ʻaoʻao-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Maʻiʻo kino-->
  8.     </div>
  9.   </div>
  10. </div>

Hoʻolālā pane

Ho'ā i nā hiʻohiʻona pane

E ho'ā i ka CSS pane i kāu papahana ma o ka hoʻokomo ʻana i ka hōʻailona meta kūpono a me ka pepa ʻano hou i loko <head>o kāu palapala. Inā ua hōʻuluʻulu ʻoe iā Bootstrap mai ka ʻaoʻao Customize, pono ʻoe e hoʻokomo i ka tag meta.

  1. <meta name = "viewport" maʻiʻo = "ākea=ākea-ākea, kumu-mua=1.0" >  
  2. <link href = "nā waiwai/css/bootstrap-responsive.css" rel = "stylesheet" >

Nā poʻo i luna!ʻAʻole hoʻokomo ʻo Bootstrap i nā hiʻohiʻona pane i kēia manawa no ka mea ʻaʻole pono nā mea āpau e pane. Ma kahi o ka paipai ʻana i nā mea hoʻomohala e wehe i kēia hiʻohiʻona, manaʻo mākou ʻoi aku ka maikaʻi o ka hiki ke hiki iā ia ke pono.

E pili ana i ka Bootstrap pane

Nā mea hana pane

Hiki i nā nīnau Media ke loaʻa CSS maʻamau e pili ana i nā kūlana he nui-nā ratios, ākea, ʻano hōʻikeʻike, a me nā mea ʻē aʻe—akā e nānā maʻamau a puni min-widtha max-width.

  • E hoʻololi i ka laulā o ke kolamu ma kā mākou mānoanoa
  • E hoʻopaʻa i nā mea ʻeleʻele ma kahi o ka lana ʻana ma kahi e pono ai
  • Hoʻololi hou i nā poʻomanaʻo a me nā kikokikona i kūpono i nā mea hana

E hoʻohana i nā nīnau media me ke kuleana a ma ke ʻano he hoʻomaka wale nō i kāu poʻe hoʻolohe kelepona. No nā papahana nui aʻe, e noʻonoʻo i nā waihona code i hoʻolaʻa ʻia a ʻaʻole nā ​​papa o nā nīnau media.

Nā mea i kākoʻo ʻia

Kākoʻo ʻo Bootstrap i kahi liʻiliʻi o nā nīnau media i hoʻokahi faila e kōkua i ka hoʻolilo ʻana i kāu mau papahana i kūpono i nā mea like ʻole a me nā hoʻonā pale. Eia ka mea i komo:

Lepili Laulā hoʻolālā laulā kolamu Laulā ʻauwai
Hōʻike nui 1200px a piʻi 70px 30px
Default 980px a i luna 60px 20px
Nā papa kiʻi 768px a i luna 42px 20px
Nā kelepona i nā papa 767px a lalo Nā kolamu wai, ʻaʻohe laula paʻa
Kelepona 480px a lalo Nā kolamu wai, ʻaʻohe laula paʻa 
  1. /* Papakaukau nui */
  2. @media ( min - laula : 1200px ) { ... }     
  3.  
  4. /* Kiʻi papa i ka ʻāina a me ka pākaukau */
  5. @media ( min - laula : 768px ) a me ( max - laula : 979px ) { ... }        
  6.  
  7. /* Kelepona ʻāina i ka papa kiʻi kiʻi */
  8. @media ( ka nui - laula : 767px ) { ... }     
  9.  
  10. /* Nā kelepona ʻāina a i lalo */
  11. @media ( max - laula : 480px ) { ... }

Nā papa hoʻohana pane

No ka hoʻomohala wikiwiki ʻana i ka paʻa lima, e hoʻohana i kēia mau papa pono no ka hōʻike ʻana a me ka hūnā ʻana i nā ʻike e ka hāmeʻa. Aia ma lalo kahi papa o nā papa i loaʻa a me kā lākou hopena i kahi hoʻonohonoho nīnau nīnau media i hāʻawi ʻia (i hōʻailona ʻia e ka mea hana). Hiki ke loaʻa iā lākou ma responsive.less.

Papa Kelepona767px a lalo Papa papa979px i 768px PapahanaDefault
.visible-phone ʻIke ʻia
.visible-tablet ʻIke ʻia
.visible-desktop ʻIke ʻia
.hidden-phone ʻIke ʻia ʻIke ʻia
.hidden-tablet ʻIke ʻia ʻIke ʻia
.hidden-desktop ʻIke ʻia ʻIke ʻia

I ka wā e hoʻohana ai

E hoʻohana ma ka palena palena a pale i ka hana ʻana i nā mana like ʻole o ka pūnaewele hoʻokahi. Akā, e hoʻohana iā lākou e hoʻokō i ka hōʻike ʻana o kēlā me kēia hāmeʻa. ʻAʻole pono e hoʻohana ʻia nā pono hana pane me nā papa, a no laila ʻaʻole i kākoʻo ʻia.

Ka hihia ho'āʻo o nā pono hana pane

E hoʻololi i kāu polokalamu kele pūnaewele a hoʻouka paha i nā mea like ʻole e hoʻāʻo i nā papa ma luna.

ʻIke ʻia ma...

Hōʻike ʻia nā kaha ʻōmaʻomaʻo e ʻike ʻia ka papa ma kāu awa nānā i kēia manawa.

  • Kelepona✔ Kelepona
  • Papapalapala✔ Papa
  • Papakaukau✔ Papahana

Huna ma...

Maʻaneʻi, hōʻike ʻia nā kaha ʻōmaʻomaʻo e hūnā ʻia ka papa i kāu ʻike ʻike i kēia manawa.

  • Kelepona✔ Kelepona
  • Papapalapala✔ Papa
  • Papakaukau✔ Papahana