I-Bootstrap

Ukwandiswa kweBootstrap

Yandisa i-Bootstrap ukuze usebenzise izitayela ezibandakanyiweyo kunye namacandelo, kunye neenguqu eziphantsi kunye nezixube.

Yakhiwe nge-LESS

I-CSS encinci

I-Bootstrap yenziwe nge-LESS kumbindi wayo, ulwimi oluguquguqukayo lweshiti lephepha elenziwe ngumhlobo wethu olungileyo, u- Alexis Sellier . Yenza ukuphuhlisa iinkqubo-based CSS ngokukhawuleza, lula, kwaye kumnandi ngakumbi.

Kutheni KUPHANTSI?

Omnye wabadali beBootstrap ubhale ibhlog ekhawulezileyo malunga nale nto , ishwankathelwe apha:

  • I-Bootstrap ihlanganisa ngokukhawuleza ~ 6x ngokukhawuleza kunye neNcinci xa kuthelekiswa ne-Sass
  • Okuncinci kubhalwe kwiJavaScript, okwenza kube lula kuthi ukuntywila kunye nokupakisha xa kuthelekiswa neRuby ngeSass.
  • Okungaphantsi kuninzi; sifuna ukuziva ngathi sibhala iCSS kwaye senza iBootstrap ifikeleleke kubo bonke.

Yintoni ebandakanyiweyo?

Njengolwandiso lwe-CSS, i-LESS ibandakanya izinto eziguquguqukayo, imixube yeekhowudi eziphinda zisetyenziswe, imisebenzi yezibalo ezilula, ukuzalanisa, kunye nemisebenzi yombala.

Funda nzulu

Ndwendwela iwebhusayithi esemthethweni ku- http: //lesscss.org/ ukufunda ngakumbi.

Ukuqulunqa iBootstrap kunye neNcinci

Ekubeni i-CSS yethu ibhaliwe ngokuNcinci kwaye isebenzisa izinto eziguquguqukayo kunye nemixube, kufuneka ihlanganiswe ukuphunyezwa kokugqibela kwemveliso. Nantsi indlela.

Qaphela: Ukuba ungenisa isicelo sokutsalwa kwi-GitHub ene-CSS elungisiweyo, kufuneka uphinde uqokelele i-CSS ngayo nayiphi na kwezi ndlela.

Izixhobo zokuqulunqa

Indawo enemakefile

Faka umqokeleli welayini yomyalelo OMNCANE, JSHnt, Recess, kunye ne-uglip-js kwihlabathi jikelele nge-npm ngokwenza lo myalelo ulandelayo:

$ npm faka -g ngaphantsi kwe-jshint recess uglip-js

Nje ukuba ifakelwe vele ubaleke makeukusuka kwingcambu yolawulo lwakho lwe-bootstrap kwaye ulungele.

Ukongeza, ukuba ufake umlindi , ungabalekamake watch ukuba ne-bootstrap yakhiwe ngokuzenzekelayo ngalo lonke ixesha uhlela ifayile kwi-bootstrap lib (oku akufuneki, indlela nje elula).

Umgca womyalelo

Faka i-LESS isixhobo somgca womyalelo ngeNode kwaye usebenzise lo myalelo ulandelayo:

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

Qinisekisa ukubandakanya --compresskulo myalelo ukuba uzama ukugcina ii-bytes ezithile!

JavaScript

Khuphela iLess.js yamva nje kwaye uquke indlela eya kuyo (kunye neBootstrap) kwifayile ye <head>.

<ikhonkco rel = "icwecwe lesimbo/ngaphantsi" href = "/indlela/to/bootstrap.less" > <script src = "/indlela/to/less.js" ></script>

Ukuqokelela kwakhona iifayile ezingaphantsi, zigcine kwaye ulayishe kwakhona iphepha lakho. I-Less.js iyaziqokelela kwaye izigcine kwindawo yokugcina indawo.

Usetyenziso olungekho semthethweni lweMac

I-app engekho semthethweni ye-Mac ijonga abalawuli beefayile ezingaphantsi. kwaye iqulunqa ikhowudi kwiifayile zendawo emva kokugcinwa kwefayile ebukeleyo. Ukuba uyathanda, ungaguqula okukhethiweyo kwi-app ukwenzela ukuguqulwa okuzenzekelayo kwaye loluphi uvimba weefayili eziqokelelweyo eziphelela kuwo.

Usetyenziso olungakumbi

Qhuba

I-Crunch ngumhleli obukekayo KANYE kunye nomqokeleli owakhiwe kwi-Adobe Air.

CodeKit

Yenziwe ngumfana ofanayo nosetyenziso olungekho semthethweni lwe-Mac, iCodeKit yi-app ye-Mac ehlanganisa i-LESS, i-SASS, i-Stylus, kunye ne-CoffeeScript.

Lula

IMac, iLinux, kunye neWindows app yokutsala kunye nokulahla ukuqulunqa iifayile eziphantsi. Ngaphezu koko, ikhowudi yomthombo ikwiGitHub .

Sebenzisa njenge-asethi engatshintshiyo

Ngokukhawuleza qalisa nayiphi na iprojekthi yewebhu ngokulahla kwi-CSS ehlanganisiweyo okanye edibeneyo kunye ne-JS. Umaleko kwizitayile zesiko ngokwahlukeneyo ukwenzela uphuculo olulula kunye nolondolozo oluqhubela phambili.

Cwangcisa ubume befayile

Khuphela iBootstrap yamva nje ehlanganisiweyo kwaye uyibeke kwiprojekthi yakho. Umzekelo, unokuba nento efana nale:

  usetyenziso/
      Uyilo/
      itemplates/
  uluntu/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Sebenzisa itemplate yokuqalisa

Khuphela isiseko se-HTML esilandelayo ukuze uqalise.

  1. <html>
  2.   <intloko>
  3.     <isihloko> I-Bootstrap 101 Template </ isihloko>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </ intloko>
  7.   <umzimba>
  8.     <h1> Molo, hlabathi! </ h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </ umzimba>
  12. </html>

Umaleko kwikhowudi yesiko

Sebenza kwi-CSS yakho yesiko, i-JS, nangaphezulu njengoko kuyimfuneko ukwenza i-Bootstrap ibe yeyakho ngeyakho i-CSS eyahlukileyo kunye neefayile ze-JS.

  1. <html>
  2.   <intloko>
  3.     <isihloko> I-Bootstrap 101 Template </ isihloko>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.     <!-- Iprojekthi -->
  7.     <link href = "public/css/application.css" rel = "icwecwe lesimbo" >  
  8.   </ intloko>
  9.   <umzimba>
  10.     <h1> Molo, hlabathi! </ h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Iprojekthi -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </ umzimba>
  16. </html>