Okugaziya · Ekitabo ky'okutandika mu Luganda

Bootstrap ekoleddwa ne LESS ku musingi gwayo, olulimi lwa stylesheet olukyukakyuka olwakolebwa mukwano gwaffe omulungi, Alexis Sellier . Kifuula okukola CSS eyesigamiziddwa ku nkola okwangu, okwangu, era okusanyusa.

Lwaki LESS?

Omu ku batonzi ba Bootstrap yawandiika ekiwandiiko eky’amangu ekya blog ku kino , nga kifunze wano:

Bootstrap ekuŋŋaanya amangu ~6x amangu ne Less bw'ogeraageranya ne Sass
Ekitono kiwandiikibwa mu JavaScript, ekituyamba okubbira mu n’okukola patch bw’ogeraageranya ne Ruby ne Sass.
Ekitono kye kisingako; twagala okuwulira nga tuwandiika CSS era ne tufuula Bootstrap okusemberera bonna.

Kiki ekirimu?

Nga ekyongereza kya CSS, LESS erimu enkyukakyuka, mixins ez’ebitundutundu bya koodi ebiddamu okukozesebwa, emirimu gy’okubala okwangu, okuteeka ebisu, n’emirimu gya langi.

Manya ebisingawo

Kyalira omukutu omutongole ku http://lesscss.org/ okumanya ebisingawo.

Okuva CSS yaffe bwewandiikibwa ne Less era nga ekozesa variables ne mixins, yeetaaga okukunganyizibwa okusobola okussa mu nkola okufulumya okusembayo. Laba engeri...

Note: Bw'oba oweereza okusaba okusika ku GitHub ne CSS ekyusiddwa, olina okuddamu okukung'aanya CSS ng'oyita mu nkola yonna ku zino.

Ebikozesebwa mu kukungaanya

Ennyiriri z’ekiragiro

Goberera ebiragiro ebiri mu pulojekiti readme ku GitHub okukung'aanya ng'oyita mu layini y'ekiragiro.

JavaScript

Wano wefunire Less.js eyasembyeyo era oteekemu ekkubo erigenda mu yo (ne Bootstrap) mu <head>.

<link rel = "olupapula lw'omulembe/ekitono" href = "/ekkubo/okugenda/bootstrap.less" > <script src = "/ekkubo/okugenda/okutono.js" ></script>

Okuddamu okukung’aanya fayiro za .less, omala kuzitereka n’oddamu okutikka omuko gwo. Less.js ezikuŋŋaanya n’ezitereka mu kutereka okw’omu kitundu.

App etali ntongole eya Mac

App ya Mac etali ntongole etunuulira dayirekita za fayiro za .less era ekuŋŋaanya koodi mu fayiro z’omu kitundu oluvannyuma lwa buli kutereka fayiro ya .less etunuuliddwa. Bw’oba oyagala, osobola okukyusakyusa by’oyagala mu app okusobola okukendeeza mu ngeri ey’otoma ne dayirekita ki fayiro ezikung’aanyiziddwa gye zikoma mu.

Apps endala

Crunch nga bwe kiri

Crunch ye editor ne compiler ya LESS erabika obulungi ennyo eyazimbibwa ku Adobe Air.

CodeKit

Yatondebwawo ggaayi y’omu ne Mac app etali ntongole, CodeKit ye Mac app ekuŋŋaanya LESS, SASS, Stylus, ne CoffeeScript.

Simpless

Mac, Linux, ne Windows app ey'okusika n'okusuula okukung'aanya fayiro za LESS. Plus, source code eri ku GitHub .

Tandika mangu pulojekiti yonna ey’omukutu ng’osuulamu CSS ne JS ezikung’aanyiziddwa oba ezikendeezeddwa. Layer ku custom styles okwawukana okusobola okwanguyirwa okulongoosa n'okuddaabiriza okugenda mu maaso.

Teekawo ensengeka ya fayiro

Wano wefunire Bootstrap eyasembyeyo okukung'aanyiziddwa oteeke mu pulojekiti yo. Okugeza oyinza okuba n’ekintu nga kino:

  app/ .
      ensengeka/ .
      ebikozesebwa mu kukola ebifaananyi/
  mu lujjudde/
      css/ .
          bootstrap.min.css nga bwe kiri
      js/ .
          bootstrap.min.js nga bwe kiri
      img/ .
          glyphicons-ebitundutundu.png
          glyphicons-ebitundutundu-ebyeru.png

Kozesa ekifaananyi ky’okutandika

Koppa base HTML eno wammanga okutandika.

<html>
  <omutwe>
    <title> Ekipande kya Bootstrap 101 </title>
    <!-- Omusipi gwa Boot -->
    <link href = "olukale/css/bootstrap.min.css" rel = "olupapula lw'omusono" >  
  </omutwe>
  <omubiri>
    <h1> Mwasuze mutya, ensi! </h1>
    <!-- Omusipi gwa Boot -->
    <script src = "olukale/js/bootstrap.min.js" ></script> 
  </omubiri>
</html>

Layer ku koodi eya bulijjo

Kola mu CSS yo eya custom, JS, n'ebirala nga bwe kyetaagisa okufuula Bootstrap eyiyo nga olina fayiro zo eza CSS ne JS ez'enjawulo.

<html>
  <omutwe>
    <title> Ekipande kya Bootstrap 101 </title>
    <!-- Omusipi gwa Boot -->
    <link href = "olukale/css/bootstrap.min.css" rel = "olupapula lw'omusono" >  
    <!-- Pulojekiti -->
    <link href = "olukale/css/enkola.css" rel = "olupapula lw'omusono" >  
  </omutwe>
  <omubiri>
    <h1> Mwasuze mutya, ensi! </h1>
    <!-- Omusipi gwa Boot -->
    <script src = "olukale/js/bootstrap.min.js" ></script> 
    <!-- Pulojekiti -->
    <script src = "olukale/js/enkola.js" ></script> 
  </omubiri>
</html>

Okugaziya Bootstrap

Yazimbibwa ne LESS