Kwagura · Bootstrap mu Rwanda

Bootstrap ikozwe na LESS kumurongo wacyo, imvugo yimiterere yimiterere yakozwe ninshuti yacu nziza, Alexis Sellier . Bituma iterambere rya sisitemu ishingiye kuri CSS byihuse, byoroshye, kandi birashimishije.

Kuki KUBESHYA?

Umwe mu baremye Bootstrap yanditse blog yihuse kuriyi ngingo , muri make hano:

Bootstrap ikusanya byihuse ~ 6x byihuse hamwe na bike ugereranije na Sass
Bike byanditse muri JavaScript, bitworohera kwibira no gutobora ugereranije na Ruby hamwe na Sass.
Guto ni byinshi; turashaka kumva ko twandika CSS kandi bigatuma Bootstrap yegera bose.

Harimo iki?

Nukwagura CSS, LESS ikubiyemo impinduka, ivanga kubice byongeye gukoreshwa bya code, ibikorwa kubiharuro byoroheje, ibyari, ndetse nibikorwa byamabara.

Wige byinshi

Sura urubuga rwemewe kuri http://lesscss.org/ kugirango umenye byinshi.

Kubera ko CSS yacu yanditse hamwe na bike kandi ikoresha impinduka na mixin, igomba gukusanywa kugirango ishyirwe mubikorwa byanyuma. Dore uko.

Icyitonderwa: Niba utanze icyifuzo cyo gukurura muri GitHub hamwe na CSS yahinduwe, ugomba gusubiramo CSS ukoresheje bumwe murubwo buryo.

Ibikoresho byo gukusanya

Node hamwe na makefile

Shyiramo LESS command umurongo utegura, JSHint, Ikiruhuko, na uglify-js kwisi yose hamwe npm ukoresheje itegeko rikurikira:

$ npm shyiramo -g gake jshint ikiruhuko uglify-js

Iyo umaze kwinjizamo gusa ukore makemumuzi yububiko bwa bootstrap kandi mwese murashizeho.

Byongeye kandi, niba ufite watchr yashizwemo, urashobora kwiruka make watchkugirango bootstrap ihite yubaka burigihe burigihe uhinduye dosiye muri bootstrap lib (ibi ntibisabwa, gusa uburyo bworoshye).

Umurongo

Shyiramo igikoresho cya LESS umurongo ukoresheje Node hanyuma ukore itegeko rikurikira:

$ lessc ./less/bootstrap.less> bootstrap.css

Wemeze gushyiramo --compressiryo tegeko niba ugerageza kubika byite!

JavaScript

Kuramo ibishya Less.js hanyuma ushiremo inzira igana (na Bootstrap) muri <head>.

<ihuza rel = "urupapuro rwerekana / ruto" href = "/ inzira/to/bootstrap.less" > <inyandiko src = " / inzira /

Kugirango usubiremo dosiye .idafite, gusa uzigame hanyuma wongere usubiremo page yawe. Gito.js irabakusanya ikabika mububiko bwaho.

Porogaramu idasanzwe ya Mac

Porogaramu idasanzwe ya Mac ireba ububiko bwamadosiye adafite kandi ikusanya kode kumadosiye yaho nyuma yo kubika dosiye ireba. Idafite. Niba ubishaka, urashobora guhinduranya ibyo ukunda muri porogaramu yo kugabanya mu buryo bwikora kandi ni ubuhe bubiko dosiye zakozwe zirangirira.

Porogaramu nyinshi

Crunch

Crunch nicyiza gisa na Muhinduzi na compiler yubatswe kuri Adobe Air.

CodeKit

Yakozwe numusore umwe na porogaramu ya Mac idasanzwe, CodeKit ni porogaramu ya Mac ikora LESS, SASS, Stylus, na CoffeeScript.

Ntibyoroshye

Porogaramu ya Mac, Linux, na Windows yo gukurura no guta ikusanyamakuru rya LESS. Byongeye, code yinkomoko iri kuri GitHub .

Tangira vuba umushinga uwo ariwo wose wurubuga ugabanuka muri CSS na JS. Imirongo yuburyo butandukanye kugirango izamure byoroshye kandi ikomeze igana imbere.

Gushiraho imiterere ya dosiye

Kuramo Bootstrap iheruka gukorwa hanyuma ushire mumushinga wawe. Kurugero, ushobora kugira ikintu nkiki:

  porogaramu /
      imiterere /
      Inyandikorugero /
  rusange /
      css /
          bootstrap.min.css
      js /
          bootstrap.min.js
      img /
          glyphicons-kimwe cya kabiri.png
          glyphicons-kimwe cya kabiri-cyera.png

Koresha intangiriro yicyitegererezo

Gukoporora HTML ikurikira kugirango utangire.

<html>
  <umutwe>
    <title> Bootstrap 101 Inyandikorugero </title>
    <! - Bootstrap ->
    <ihuza href = "rusange / css / bootstrap.min.css" rel = "urupapuro rwerekana" >  
  </head>
  <body>
    <h1> Mwaramutse, isi! </h1>
    <! - Bootstrap ->
    <inyandiko src = "rusange / js / bootstrap.min.js" > </script> 
  </body>
</html>

Imirongo kuri kode yihariye

Kora muri CSS yawe yihariye, JS, nibindi bikenewe kugirango Bootstrap yawe bwite hamwe na dosiye yawe yihariye ya CSS na JS.

<html>
  <umutwe>
    <title> Bootstrap 101 Inyandikorugero </title>
    <! - Bootstrap ->
    <ihuza href = "rusange / css / bootstrap.min.css" rel = "urupapuro rwerekana" >  
    <! - Umushinga ->
    <ihuza href = "rusange / css / gusaba.css" rel = " urupapuro rwerekana "  
  </head>
  <body>
    <h1> Mwaramutse, isi! </h1>
    <! - Bootstrap ->
    <inyandiko src = "rusange / js / bootstrap.min.js" > </script> 
    <! - Umushinga ->
    <inyandiko src = "rusange / js / gusaba.js" > </script> 
  </body>
</html>

Kwagura Bootstrap

Yubatswe na LESS