Hoʻonui i ka Bootstrap

E hoʻolōʻihi i ka Bootstrap e hoʻohana pono i nā kaila a me nā ʻāpana, a me nā ʻano LESS a me nā hui pū.

NUI CSS

Hana ʻia ʻo Bootstrap me LESS ma kāna kumu, he ʻōlelo stylesheet ikaika i hana ʻia e kā mākou hoaaloha maikaʻi, ʻo Alexis Sellier . ʻOi aku ka wikiwiki, maʻalahi a me ka leʻaleʻa o ka hoʻomohala ʻana i ka CSS e pili ana i nā ʻōnaehana.

No ke aha e emi ai?

Ua kākau kekahi o nā mea hana a Bootstrap i kahi moʻomanaʻo blog wikiwiki e pili ana i kēia , i hōʻuluʻulu ʻia ma aneʻi:

  • Hoʻopili wikiwiki ʻo Bootstrap ~ 6x wikiwiki me ka liʻiliʻi i hoʻohālikelike ʻia me Sass
  • Ua kākau ʻia ka liʻiliʻi ma JavaScript, e maʻalahi iā mākou ke luʻu a hoʻopaʻa i ka hoʻohālikelike ʻia me Ruby me Sass.
  • ʻOi aku ka liʻiliʻi; makemake mākou e like me kā mākou kākau ʻana i ka CSS a hoʻopili iā Bootstrap i nā mea āpau.

He aha ka mea i komo?

Ma ke ʻano he hoʻonui ʻia o CSS, LESS nā mea hoʻololi, mixins no ka hoʻohana hou ʻana i nā snippets o ke code, nā hana no ka makemakika maʻalahi, nesting, a me nā hana kala.

Aʻo hou mai

E kipa i ka pūnaewele mana ma http://lesscss.org/ e aʻo hou aku.

No ka mea ua kākau ʻia kā mākou CSS me Less a hoʻohana i nā ʻano like ʻole a me nā mixins, pono ia e hōʻuluʻulu ʻia no ka hoʻokō ʻana i ka hana hope. Penei pehea.

'Ōlelo Aʻo: Inā ʻoe e hoʻouna ana i kahi noi huki iā GitHub me CSS i hoʻololi ʻia, pono ʻoe e hōʻuluʻulu hou i ka CSS ma o kēia mau ʻano.

Nā mea hana no ka hōʻuluʻulu ʻana

Laina kauoha

E hahai i nā ʻōlelo aʻoaʻo ma ka papahana readme ma GitHub no ka hōʻuluʻulu ʻana ma o ka laina kauoha.

JavaScript

Hoʻoiho i ka Less.js hou loa a hoʻokomo i ke ala i laila (a me Bootstrap) i ka <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

No ka hōʻuluʻulu hou ʻana i nā faila .less, mālama wale iā lākou a hoʻouka hou i kāu ʻaoʻao. Hoʻopili ʻo Less.js iā lākou a mālama iā lākou i loko o kahi waihona kūloko.

ʻO ka polokalamu Mac kūhelu ʻole

Nānā ka polokalamu Mac manaʻole i nā papa kuhikuhi o nā faila .less a hōʻuluʻulu i ke code i nā faila kūloko ma hope o kēlā me kēia mālama ʻana o kahi faila .less i nānā ʻia. Inā makemake ʻoe, hiki iā ʻoe ke hoʻololi i nā koho i loko o ka app no ​​ka hoʻohaʻahaʻa maʻalahi a me ka papa kuhikuhi i hoʻopau ʻia nā faila i hōʻuluʻulu ʻia.

Nā polokalamu hou aku

Crunch

ʻO Crunch kahi mea hoʻoponopono LESS maikaʻi a me ka mea hoʻopili i kūkulu ʻia ma Adobe Air.

CodeKit

Hoʻokumu ʻia e ke kanaka like me ka polokalamu Mac kūʻokoʻa ʻole, CodeKit he polokalamu Mac e hōʻuluʻulu ana i LESS, SASS, Stylus, a me CoffeeScript.

maʻalahi

ʻO Mac, Linux, a me Windows app no ​​ka huki ʻana a me ka hoʻokuʻu ʻana i nā faila LESS. Eia kekahi, aia ke code kumu ma GitHub .

E hoʻomaka koke i kekahi papahana pūnaewele ma ka waiho ʻana i ka CSS a me JS i hōʻuluʻulu ʻia a liʻiliʻi paha. E hoʻokaʻawale i nā kaila maʻamau no ka hoʻomaikaʻi maʻalahi a me ka mālama ʻana i mua.

Hoʻonohonoho i ke ʻano waihona

Hoʻoiho i ka Bootstrap i hui hou ʻia a hoʻokomo i kāu papahana. No ka laʻana, loaʻa paha iā ʻoe kekahi mea e like me kēia:

  app/
      nā papa kuhikuhi/
      ma'amau/
  lehulehu/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

E hoʻohana i ka papa hoʻomaka

E kope i kēia kumu HTML e hoʻomaka ai.

  1. <html>
  2. <poʻo>
  3. <title> Bootstrap 101 Template </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <kino>
  8. <h1> Aloha, honua! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </kino>
  12. </html>

Lapa ma ke code maʻamau

E hana i kāu CSS maʻamau, JS, a me nā mea e pono ai e hana iā Bootstrap iā ʻoe iho me kāu mau faila CSS a me JS.

  1. <html>
  2. <poʻo>
  3. <title> Bootstrap 101 Template </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Papahana -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <kino>
  10. <h1> Aloha, honua! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Papahana -->
  14. <script src = "public/js/application.js" ></script>
  15. </kino>
  16. </html>