Omusipi gwa Bootstrap

Okugaziya Bootstrap

Extend Bootstrap okweyambisa omukisa gw'emisono n'ebitundu ebirimu, wamu ne LESS variables ne mixins.

Yazimbibwa ne LESS

CSS ENTONO

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.

Okukunganya Bootstrap ne Less

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

Node nga eriko makefile

Teeka omukung'aanya w'ennyiriri z'ekiragiro LESS, JSHint, Recess, ne uglify-js mu nsi yonna ne npm ng'okola ekiragiro kino wammanga:

$ npm okuteeka -g ekitono jshint okuwummulamu uglify-js

Bw'omala okussaako dduka budduka makeokuva ku kikolo kya bootstrap directory yo era mwenna muba otegese.

Okugatta ku ekyo, bw’oba ​​olina watchr gy’ossaako, oyinza okudduka make watchokubeera ne bootstrap okuddamu okuzimbibwa mu ngeri ey’otoma buli lw’olongoosa fayiro mu bootstrap lib (kino tekikyetaagisa, nkola ya kukwanguyiza yokka).

Ennyiriri z’ekiragiro

Teeka ekintu kya LESS command line tool ng'oyita mu Node era okole ekiragiro kino wammanga:

$ lessc ./less/okutandika.less > okutandika.css

Kakasa nti ossaamu --compressmu kiragiro ekyo bw'oba ogezaako okutereka bytes ezimu!

JavaScript

Wano wefunire Less.js esembyeyo 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 ya Mac etali ntongole

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 .

Kozesa nga eby’obugagga ebitali bikyukakyuka

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.

  1. <html>
  2.   <omutwe>
  3.     <title> Ekipande kya Bootstrap 101 </title>
  4.     <!-- Omusipi gwa Boot -->
  5.     <link href = "olukale/css/bootstrap.min.css" rel = "olupapula lw'omusono" >  
  6.   </omutwe>
  7.   <omubiri>
  8.     <h1> Mwasuze mutya, ensi! </h1>
  9.     <!-- Omusipi gwa Boot -->
  10.     <script src = "olukale/js/bootstrap.min.js" ></script> 
  11.   </omubiri>
  12. </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.

  1. <html>
  2.   <omutwe>
  3.     <title> Ekipande kya Bootstrap 101 </title>
  4.     <!-- Omusipi gwa Boot -->
  5.     <link href = "olukale/css/bootstrap.min.css" rel = "olupapula lw'omusono" >  
  6.     <!-- Pulojekiti -->
  7.     <link href = "olukale/css/enkola.css" rel = "olupapula lw'omusono" >  
  8.   </omutwe>
  9.   <omubiri>
  10.     <h1> Mwasuze mutya, ensi! </h1>
  11.     <!-- Omusipi gwa Boot -->
  12.     <script src = "olukale/js/bootstrap.min.js" ></script> 
  13.     <!-- Pulojekiti -->
  14.     <script src = "olukale/js/enkola.js" ></script> 
  15.   </omubiri>
  16. </html>