Bootstrap

Pākuʻi

Hoʻokumu ʻia ʻo Bootstrap ma kahi mākia 12-kolume pane. Ua hoʻokomo pū mākou i nā hoʻolālā paʻa a me ka laula wai e pili ana i kēlā ʻōnaehana.

Nā ʻano honua no ka hoʻoponopono hou ʻana o CSS, typography, a me nā loulou

Pono HTML5 doctype

Hoʻohana ʻo Bootstrap i nā mea HTML a me nā waiwai CSS e koi ai i ka hoʻohana ʻana i ka HTML5 doctype. E hōʻoia e hoʻokomo iā ia ma ka hoʻomaka o kēlā me kēia ʻaoʻao Bootstrapped i kāu papahana.

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

Typography a me nā loulou

I loko o ka waihona scaffolding.less , hoʻonoho mākou i nā ʻano hōʻike honua kumu, typography, a me nā ʻano loulou. ʻOiaʻiʻo, mākou:

  • Wehe i ka palena ma 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

Hoʻoponopono hou ma o Normalize

E like me Bootstrap 2, ua ulu ka hoʻoponopono CSS kuʻuna e hoʻohana i nā mea mai Normalize.css , kahi papahana na Nicolas Gallagher e mana pū ana i ka HTML5 Boilerplate .

Hiki ke loaʻa ka hoʻoponopono hou ma reset.less , akā me nā mea he nui i wehe ʻia no ka pōkole a me ka pololei.

Pūnaehana mākia paʻamau 12 kolamu me ka wili pane

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

ʻO ka ʻōnaehana mākia paʻamau i hāʻawi ʻia ma ke ʻano he ʻāpana o Bootstrap he 940px-ākea, 12-kolani mākia .

Loaʻa iā ia nā ʻano like ʻole ʻehā no nā mea like ʻole a me nā ʻōlelo hoʻoholo: kelepona, kiʻi papa papa, papa ʻāina a me nā pākaukau liʻiliʻi, a me nā pākaukau ākea nui.

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

E like me ka mea i hōʻike ʻia ma ʻaneʻi, hiki ke hana ʻia kahi hoʻolālā kumu me ʻelua "koluma", kēlā me kēia me ka helu o nā kolamu kumu 12 a mākou i wehewehe ai ma ke ʻano he ʻāpana o kā mākou pūnaewele puni honua.


Hoʻopio i nā kolamu

4
4 hoʻopau 4
3 offset 3
3 offset 3
8 hoopau 4 
  1. <div class = "lālani" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nā kolamu nesting

Me ka ʻōnaehana static (non-fluid) ma Bootstrap, maʻalahi ka nesting. No ka hoʻopaʻa ʻana i kāu ʻike, hoʻohui wale i kahi kolamu hou .rowa hoʻonohonoho i .span*loko o kahi .span*kolamu e kū nei.

Laʻana

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. No ka laʻana, .span3pono e kau ʻia nā kolamu ʻelua i loko o kahi .span6.

Papa 1 o ke kolamu
Papa 2
Papa 2 
  1. <div class = "lālani" > 
  2.   <div class = "span12" > 
  3.     Papa 1 o ke kolamu
  4.     <div class = "lālani" > 
  5.       <div class = "span6" > Papa 2 </div> 
  6.       <div class = "span6" > Papa 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Pūnaehana mākia wai 12 pane, kolamu ma muli o ka pākēneka

Nā kolamu wai

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

Pākēneka, ʻaʻole nā ​​pika

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

Nā lālani wai

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

Markup

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

ʻO ka pūnana wai

He ʻokoʻa iki ka hoʻomoe ʻana me nā puna wai: ʻaʻole pono ka helu o nā kolamu pūnana i ka makua. Akā, hoʻonohonoho hou ʻia kāu mau kolamu ma kēlā me kēia pae no ka mea e lawe ana kēlā me kēia lālani i ka 100% o ke kolamu makua.

Waiwai 12
Waiwai 6
Waiwai 6 
  1. <div class = "laina-wai" > 
  2.   <div class = "span12" > 
  3.     Papa 1 o ke kolamu
  4.     <div class = "laina-wai" > 
  5.       <div class = "span6" > Papa 2 </div> 
  6.       <div class = "span6" > Papa 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Hoʻopilikino pili

Hoʻololi Waiwai paʻamau wehewehe
@gridColumns 12 Ka helu o nā kolamu
@gridColumnWidth 60px Laulā o kēlā me kēia kolamu
@gridGutterWidth 20px Kaawale ʻino ma waena o nā kolamu

Nā hoʻololi i LESS

Hoʻokomo ʻia i loko o Bootstrap he mau ʻāpana liʻiliʻi no ka hoʻoponopono ʻana i ka ʻōnaehana grid 940px paʻamau, i kākau ʻia ma luna. Mālama ʻia nā mea hoʻololi a pau no ka mānoanoa ma nā variables.less.

Pehea e hoʻopilikino ai

ʻO ka hoʻololi ʻana i ka mānoanoa ʻo ia ka hoʻololi ʻana i nā ʻano ʻekolu @grid*a me ka hoʻopili hou ʻana iā Bootstrap. E hoʻololi i nā mea hoʻololi pūnaewele ma variables.less a hoʻohana i kekahi o nā ala ʻehā i palapala ʻia no ka hoʻopili hou ʻana . Inā hoʻohui ʻoe i nā kolamu hou aʻe, e ʻoluʻolu e hoʻohui i ka CSS no ka poʻe ma grid.less.

Noho pane

ʻO ka hana maʻamau o ka mākia wale nō e hana ma ka pae paʻamau, ka mākia 940px. No ka mālama ʻana i nā ʻano pane o Bootstrap, pono ʻoe e hoʻopilikino i nā grids ma responsive.less.

Layouts Nā kumu kumu no ka hana ʻana i nā ʻaoʻao pūnaewele

Hoʻolālā paʻa

ʻO ka paʻamau a me ka maʻalahi 940px-ākea, hoʻolālā kikowaena no kahi pūnaewele a i ʻole ʻaoʻao i hāʻawi ʻia e hoʻokahi <div class="container">.

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

Hoʻolālā wai

<div class="container-fluid">hāʻawi i ka hoʻolālā ʻaoʻao maʻalahi, min- a me max-ākea, a me kahi ʻaoʻao ʻaoʻao hema. He mea maikaʻi no nā polokalamu 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 Nā nīnau Media no nā mea like ʻole a me nā hoʻoholo

Nā mea hana pane

He aha kā lākou hana

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
Smartphones 480px a lalo Nā kolamu wai, ʻaʻohe laula paʻa
Nā kelepona i nā papa 767px a lalo Nā kolamu wai, ʻaʻohe laula paʻa
Nā papa kiʻi 768px a i luna 42px 20px
Default 980px a i luna 60px 20px
Hōʻike nui 1200px a piʻi 70px 30px

Pono ka lepili meta

No ka hōʻoia pono ʻana i nā ʻaoʻao pane pololei, e hoʻokomo i ka tag meta viewport.

  1. <meta name = "viewport" maʻiʻo = "ākea=ākea-ākea, kumu-mua=1.0" >

Ke hoʻohana nei i nā nīnau media

ʻAʻole hoʻokomo ʻokoʻa ʻo Bootstrap i kēia mau nīnau media, akā maʻalahi loa ka hoʻomaopopo ʻana a me ka hoʻohui ʻana iā lākou a pono ka hoʻonohonoho liʻiliʻi. Loaʻa iā ʻoe kekahi mau koho no ka hoʻopili ʻana i nā hiʻohiʻona pane o Bootstrap:

  1. E hoʻohana i ka mana pane i hui ʻia, bootstrap-responsive.css
  2. Hoʻohui @import "responsive.less" a hoʻohui hou iā Bootstrap
  3. Hoʻololi a hoʻohui hou i responsive.less ma ke ʻano he faila ʻokoʻa

No ke aha e hoʻokomo ʻole ai? ʻO ka ʻoiaʻiʻo, ʻaʻole pono nā mea a 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 he mea maikaʻi loa ia e hiki ai.

  1.   // Nā kelepona ʻāina a i lalo
  2.   @media ( max - laula : 480px ) { ... }     
  3.  
  4.   // Kelepona ʻāina i ka papa kiʻi kiʻi
  5.   @media ( ka nui - laula : 767px ) { ... }     
  6.  
  7.   // Kiʻi papa i ka ʻāina a me ka pākaukau
  8.   @media ( min - laula : 768px ) a me ( max - laula : 979px ) { ... }        
  9.  
  10.   // Papapihi nui
  11.   @media ( min - laula : 1200px ) { ... }

Nā papa hoʻohana pane

He aha lākou

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.

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.

No ka laʻana, hiki iā ʻoe ke hōʻike i kahi <select>mea no ka nav ma nā hoʻolālā paʻa lima, akā ʻaʻole ma nā papa a i ʻole nā ​​​​papakaukau.

Nā papa kākoʻo

Hōʻike ʻia ma ʻaneʻi kahi papa o nā papa a mākou e kākoʻo ai a me kā lākou hopena ma 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 Kelepona480px a lalo Papa papa767px a lalo Papahana768px a i luna
.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

pahu hoao

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