Hoʻonui · Bootstrap ma ka ʻōlelo Hawaiʻi

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.

<html>
  <poʻo>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <kino>
    <h1> Aloha, honua! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </kino>
</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.

<html>
  <poʻo>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Papahana -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <kino>
    <h1> Aloha, honua! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Papahana -->
    <script src = "public/js/application.js" ></script> 
  </kino>
</html>

Hoʻonui i ka Bootstrap

Kūkulu ʻia me LESS