Dheereessuu · Bootstrap Afaan Oromootiin

Bootstrap kan hojjetame LESS hundee isaa irratti, afaan stylesheet daayinamikii hiriyyaa keenya gaarii, Alexis Sellier . CSS sirna irratti hundaa'e hojjechuu saffisaa, salphaa fi bashannansiisaa taasisa.

Maaliif SESS?

Uumtoota Bootstrap keessaa tokko waa'ee kanaa barreeffama biloogii saffisaa barreesse , asitti gabaabfame:

Bootstrap Sass wajjin wal bira qabamee yoo ilaalamu Less wajjin saffisaa ~6x saffisaa qindeessa
Xiqqaan JavaScript keessatti barreeffameera, kunis Ruby with Sass wajjin wal bira qabamee yoo ilaalamu dive in fi patch gochuuf salphaa nuuf taasisa.
Xiqqaa jechuun baay’eedha; akka waan CSS barreessinee Bootstrap hundaaf akka dhiyaatu gochaa jirrutti nutti dhaga'amuu barbaanna.

Maaltu dabalameera?

Akka dheerina CSS, LESS jijjiiramoota, mixins cuquliisa koodii irra deebi'amee fayyadamuu danda'aniif, hojiiwwan herrega salphaa, man'ee, fi illee faankishiniiwwan halluu of keessatti qabata.

Caalaatti baradhaa

Caalaatti baruuf marsariitii ofiisaa http://lesscss.org/ daawwadhaa.

CSS keenya Less tiin kan barreeffamee fi jijjiiramootaa fi mixins kan fayyadamu waan ta’eef, hojiirra oolmaa oomisha dhumaatiif qindaa’uu qaba. Kunoo akkamitti.

Hubachiisa: Yoo gaaffii harkisaa gara GitHub CSS fooyya'een galchite, CSS karaa malawwan kana keessaa kamiinuu irra deebitee qindeessuu qabda .

Meeshaalee qindeessuuf gargaaran

Noodiin makefile qabu

Ajaja armaan gadii hojjechuudhaan qindeessaa sarara ajajaa LESS, JSHint, Recess, fi uglify-js akka addunyaatti npm waliin fe'i:

$ npm fe'i -g xiqqaa jshint boqonnaa uglify-js

Erga fe'amee booda makehundee galmee bootstrap kee irraa qofa hojjedhu hundi kee qophaa'aa jirta.

Dabalataan, yoo watchr fe'atte, make watchyeroo faayilii bootstrap lib keessatti gulaaltu hunda bootstrap ofumaan akka deebi'ee ijaaramu gochuuf fiiguu dandeessa (kun hin barbaachisu, mala mijataa qofa).

Sarara ajajaa

Meeshaa sarara ajajaa LESS karaa Node fe'iitii ajaja armaan gadii hojjedhu:

$ xiqqaa ./xiqqoo/bootstrap.less > bootstrap.css

--compressYoo baayitii tokko tokko qusachuuf yaaltu ajaja sana keessatti hammachuu kee mirkaneessi !

JaavaScript

Less.js isa haaraa buufadhuutii daandii gara isaatti geessu (fi Bootstrap) <head>.

<link rel = "waraqaa akkaataa/xiqqaa" href = "/karaa/gara/bootstrap.xiqqaa" > <script src = "/karaa/gara/xiqqaa.js" ></script>

Faayilota .less irra deebi'anii qindeessuuf, save gochuu qofaafi fuula kee irra deebi'ii fe'i. Less.js isaan qindeessee kuusaa naannoo keessatti kuufata.

Appii Mac kan ofiisaa hin taane

Appiin Mac hin ofiisaa ta'e galmeewwan faayiloota .less ilaalaa fi koodii gara faayiloota naannootti qindeessa erga faayila .less ilaalame qusachuu hunda booda. Yoo jaallatte, filannoowwan appii keessa jiran jijjiiruun ofumaan xiqqeessuu fi faayiloota qindaa'an galmee kam keessatti akka xumuraman gochuu dandeessa.

Appilikeeshiniiwwan dabalataa

Crunch jedhamuun beekama

Crunch gulaalaa fi qindeessaa LESS guddaa fakkaatu kan Adobe Air irratti ijaarameedha.

KoodiiKiitii

Gurbaa appii Mac hin ofiisaa ta'een kan uumame CodeKit appii Mac kan LESS, SASS, Stylus, fi CoffeeScript qindeessuudha.

Salphaa hin taane

Mac, Linux, fi Windows app faayiloota LESS harkisuu fi gadi dhiisuuf qindeessuuf gargaaru. Dabalataan, koodii maddi GitHub irratti argama .

CSS fi JS qindaa'e ykn xiqqaate gadi dhiisuun pirojektii weeb kamiyyuu dafii jalqabi . Fooyya'iinsa salphaa fi suphaa fuulduratti tarkaanfachuuf akkaataa amala irratti addaan laayibarii.

Caasaa faayilii saagi

Bootstrap isa haaraa qindaa'e buufadhaatii pirojektii keessan keessa kaa'aa. Fakkeenyaaf, waan akkanaa qabaachuu dandeessa:

  app/
      haalawwan/ .
      unkaalee/ .
  uummata/
      css/ .
          bootstrap.min.css jedhamuun beekama
      js/ .
          bootstrap.min.js jedhamuun beekama
      img/ .
          glyphicons-walakkaawwan.png
          glyphicons-walakkaa-adii.png

Unkaa jalqabaa fayyadami

Jalqabuuf HTML bu'uuraa armaan gadii waraabi.

<html> jedhamuun beekama
  <mataa>
    <title> Unkaa Bootstrap 101 </mata duree>
    <!-- Bootstrap --> jedhu
    <link href = "uummataa/css/bootstrap.min.css" rel = "waraqaa akkaataa" >  
  </head> jedhu
  <qaama>
    <h1> Akkam jirtu addunyaa! </h1> jechuun ni danda’ama
    <!-- Bootstrap --> jedhu
    <iskiriiptii src = "uummataa/js/bootstrap.min.js" </script> 
  </qaama>
</html> jedhu

Koodii amala irratti laayibara

Bootstrap faayiloota CSS fi JS adda addaa mataa keetiin kan kee akka ta'uuf akka barbaachisummaa isaatti CSS, JS, fi kanneen biroo amala kee keessatti hojjedhu.

<html> jedhamuun beekama
  <mataa>
    <title> Unkaa Bootstrap 101 </mata duree>
    <!-- Bootstrap --> jedhu
    <link href = "uummataa/css/bootstrap.min.css" rel = "waraqaa akkaataa" >  
    <!-- Pirojektii -->
    <link href = "uummataa/css/application.css" rel = "waraqaa akkaataa" >  
  </head> jedhu
  <qaama>
    <h1> Akkam jirtu addunyaa! </h1> jechuun ni danda’ama
    <!-- Bootstrap --> jedhu
    <iskiriiptii src = "uummataa/js/bootstrap.min.js" </script> 
    <!-- Pirojektii -->
    <script src = "uummataa/js/application.js" ></script> 
  </qaama>
</html> jedhu

Bootstrap dheeressuu

LESS tiin ijaarame