Keke ɖe enu · Bootstrap le Ewegbe me

Wowɔ Bootstrap kple LESS le eƒe nu vevitɔ me, si nye atsyãgbalẽ ƒe gbegbɔgblɔ si trɔna si mía xɔlɔ̃ nyui, Alexis Sellier wɔ . Enaa CSS si wotu ɖe ɖoɖowo dzi wɔwɔ kabakaba, nɔa bɔbɔe, eye wòvivina wu.

Nukatae WÒLE NU GBƆ?

Bootstrap wɔlawo dometɔ ɖeka ŋlɔ blog me nya aɖe kabakaba tso esia ŋu , si woƒo nu tsoe kpuie le afisia:

Bootstrap ƒoa ƒu kabakaba ~6x kabakaba kple Less ne wotsɔe sɔ kple Sass
Woŋlɔa nu ʋɛ aɖewo ɖe JavaScript me, si wɔnɛ be wònɔa bɔbɔe na mí be míaƒu tsi ɖe eme ahawɔ patch ne míetsɔe sɔ kple Ruby kple Sass.
Nu sue aɖe koe nye nu geɖe; míedi be míase le mía ɖokui me abe ɖe míele CSS ŋlɔm ene eye míele Bootstrap wɔm be amewo katã ate ŋu ate ɖe eŋu.

Nukae le eme?

Abe CSS ƒe kekeɖenu ene la, LESS lɔ tɔtrɔwo, mixins na kɔda ƒe akpa siwo woate ŋu azã ake, dɔwɔwɔwo na akɔntabubu bɔbɔe, nesting, kple amadede ƒe dɔwɔwɔwo gɔ̃ hã ɖe eme.

Srɔ̃ nu geɖe tso eŋu

Yi nyatakakadzraɖoƒe si dziɖuɖua ɖo le http://lesscss.org/ be nàsrɔ̃ nu geɖe.

Esi wònye be woŋlɔ míaƒe CSS la kple Less eye wozãa tɔtrɔwo kple mixins ta la, ehiã be woaƒoe nu ƒu hena wɔwɔ mamlɛtɔ ƒe dɔwɔwɔ. Ale si woawɔe nye esi.

De dzesii: Ne èle hehebiabia ɖom ɖe GitHub kple CSS si woɖɔli la, ele be nàgbugbɔ aƒo CSS la nu ƒu to mɔnu siawo dometɔ aɖe dzi.

Dɔwɔnu siwo woatsɔ aƒo nu nu ƒu

Node kple makefile

De LESS sedede fli nuƒoƒoƒula, JSHint, Recess, kple uglify-js xexeame katã kple npm to sedede si gbɔna la zazã me:

$ npm ɖo -g si mesɔ gbɔ o jshint ƒe ɖiɖiɖeme uglify-js

Ne ènya de eme ko la, ɖeko nàƒu du maketso wò bootstrap directory ƒe ke me eye mi katã mieɖoe.

Gakpe ɖe eŋu la, ne watchr le asiwò la, àteŋu aƒu du make watchana bootstrap nagbugbɔ atu le eɖokui si ɣesiaɣi si nètrɔ asi le faɛl aɖe ŋu le bootstrap lib me (esia mehiã o, mɔnu si sɔ ko).

Sedede ƒe fli

De LESS sedede fli dɔwɔnu to Node dzi eye nàwɔ sedede si gbɔna:

$ lessc ./less/afɔɖeɖe.less > aʋadziɖuɖu.css

Kpɔ egbɔ be --compressyede sedede ma me ne èle agbagba dzem be yeadzra byte aɖewo ɖo!

JavaScript

Wɔ Less.js yeyetɔ ƒe kɔpi eye nàde mɔ si dzi nàto ayi edzi (kple Bootstrap) ɖe <head>.

<link rel = "stylesheet/less" href = "/mɔ/yi/bootstrap.less" > <script src = "/mɔ/yi/le sue.js" ></script>

Be nàgbugbɔ aƒo .less faɛlawo nu ƒu la, ɖeko nàdzra wo ɖo eye nàgbugbɔ akɔ wò axaa dzi. Less.js ƒoa wo nu ƒu eye wòdzraa wo ɖo ɖe nutoa me nudzraɖoƒe.

Mac ƒe dɔwɔnu si womewɔ le se nu o

Mac dɔwɔnu si womewɔ le se nu o la léa ŋku ɖe .less faɛlwo ƒe nyatakakadzraɖoƒewo ŋu eye wòƒoa kɔdaawo nu ƒu ɖe faɛl siwo le mia gbɔ me le .less faɛl si wokpɔ la dzraɖo ɖesiaɖe megbe. Ne èdi la, àte ŋu atrɔ asi le nusiwo nèdi ŋu le dɔwɔnua me be nàte ŋu awɔ nu suesuesue siwo le wo ɖokui si kple nyatakakadzraɖoƒe si me faɛl siwo woƒo ƒu la ava wu enu ɖo.

Dɔdamɔnu bubuwo

Crunch ƒe ƒuƒoƒo

Crunch nye LESS nuŋlɔla kple nuƒoƒoƒula si ƒe dzedzeme nyo ŋutɔ si wotu ɖe Adobe Air dzi.

CodeKit ƒe ƒuƒoƒo

Ŋutsu ɖeka ma ke wɔe kple Mac dɔwɔnu si womewɔ le se nu o, CodeKit nye Mac dɔwɔnu si ƒoa LESS, SASS, Stylus, kple CoffeeScript nu ƒu.

Nu bɔbɔe aɖeke mele eme o

Mac, Linux, kple Windows dɔwɔɖoɖo na LESS faɛlwo nuƒoƒoƒu kple tsɔtsɔ ƒu gbe. Gakpe ɖe eŋu la, dzɔtsoƒe ƒe nuŋɔŋlɔa le GitHub .

Dze web dɔ ɖesiaɖe gɔme kaba to CSS kple JS siwo woƒo ƒu alo woɖe ɖe vovo la tsɔtsɔ de eme me. Layer le custom atsyãwo ɖe vovo na bɔbɔe upgrades kple beléle na ŋgɔyiyi.

Ðo faɛl ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu

Wɔ Bootstrap yeyetɔ si woƒo ƒu la ƒe kɔpi eye nàtsɔe ade wò dɔa me. Le kpɔɖeŋu me, ɖewohĩ nane si le abe esia ene anɔ asiwò:

  app/ .
      ɖoɖowo/ .
      nɔnɔmetatawo/ .
  amedome/
      css/ .
          bootstrap.min.css ƒe ƒuƒoƒo
      js/ .
          bootstrap.min.js ƒe ƒuƒoƒo
      img/ .
          glyphicons-afãwo ƒe ƒuƒoƒo.png
          glyphicons-afãwo-fu.png

Zã gɔmedzedze ƒe nɔnɔmetata

Kpɔ gɔmeɖoanyi HTML si gbɔna la ƒe kɔpi be nàdze egɔme.

<html>
  <ta>
    <title> Bootstrap 101 ƒe nɔnɔmetata </title>
    <!-- Afɔdzideƒe -->
    <kadodo href = "dutoƒo/css/bootstrap.min.css" rel = "atsyã ƒe agbalẽvi" >  
  </head> ƒe nyawo
  <ŋutilã>
    <h1> Mido gbe nam, xexeame! </h1> ƒe nyawo
    <!-- Afɔdzideƒe -->
    <script src = "dutoƒo/js/bootstrap.min.js" ></ŋɔŋlɔdzesi> 
  </body>
</html> ƒe nyawo

Layer le custom code dzi

Wɔ dɔ le wò CSS, JS, kple bubuwo me alesi wòhiã be nàna Bootstrap nazu tɔwò kple wò ŋutɔ wò CSS kple JS faɛl vovovowo.

<html>
  <ta>
    <title> Bootstrap 101 ƒe nɔnɔmetata </title>
    <!-- Afɔdzideƒe -->
    <kadodo href = "dutoƒo/css/bootstrap.min.css" rel = "atsyã ƒe agbalẽvi" >  
    <!-- Dɔwɔna -->
    <kadodo href = "dutoƒo/css/dɔwɔwɔ.css" rel = "atsyãgbalẽ" >  
  </head> ƒe nyawo
  <ŋutilã>
    <h1> Mido gbe nam, xexeame! </h1> ƒe nyawo
    <!-- Afɔdzideƒe -->
    <script src = "dutoƒo/js/bootstrap.min.js" ></ŋɔŋlɔdzesi> 
    <!-- Dɔwɔna -->
    <script src = "dutoƒo/js/dɔwɔwɔ.js" ></script> 
  </body>
</html> ƒe nyawo

Bootstrap ƒe kekeɖenudɔwɔwɔ

Wotue kple LESS