Nweba · I-Bootstrap ngolimi lwesiZulu

I-Bootstrap yenziwe nge-LESS engqikithini yayo, ulimi lweshidi lesitayela oluguqukayo oludalwe umngane wethu omkhulu, u- Alexis Sellier . Kwenza ukuthuthukiswa kwe-CSS okusekelwe kumasistimu kusheshe, kube lula, futhi kube mnandi kakhulu.

Kungani KUNCANE?

Omunye wabadali be-Bootstrap ubhale iposi lebhulogi esheshayo mayelana nalokhu , okufingqiwe lapha:

I-Bootstrap ihlanganisa ngokushesha okungu-~6x ngokushesha Ngokuncane uma kuqhathaniswa ne-Sass
Okuncane kubhalwe ku-JavaScript, okwenza kube lula kithi ukungena nokuchibiyela uma kuqhathaniswa ne-Ruby ne-Sass.
Okuncane okuningi; sifuna ukuzwa sengathi sibhala i-CSS futhi senza i-Bootstrap ingeneke kubo bonke.

Yini efakiwe?

Njengesandiso se-CSS, i-LESS ihlanganisa okuguquguqukayo, imiksi yamazwibela asebenzisekayo ekhodi, imisebenzi yezibalo ezilula, ukwenza isidleke, kanye nemisebenzi yombala.

Funda kabanzi

Vakashela iwebhusayithi esemthethweni kokuthi http://lesscss.org/ ukuze ufunde kabanzi.

Njengoba i-CSS yethu ibhalwe Ngokuncane futhi isebenzisa okuguquguqukayo namamiksi, idinga ukuhlanganiswa ukuze kusetshenziswe ukukhiqizwa kokugcina. Nansi indlela.

Qaphela: Uma uthumela isicelo sokudonsa ku-GitHub nge-CSS eguquliwe, kufanele uphinde uhlanganise i-CSS nganoma iyiphi yalezi zindlela.

Amathuluzi okuhlanganiswa

Umugqa womyalo

Landela imiyalo ekufundweni kwephrojekthi ku-GitHub ukuze uyihlanganise ngomugqa womyalo.

I-JavaScript

Landa i-Less.js yakamuva futhi ufake indlela eya kuyo (kanye ne-Bootstrap) kufayela le- <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less"> rel = "stylesheet/ less" href = "/path/to/bootstrap.less" > 
<script src="/path/to/less.js"></script><script src = "/path/to/less.js" ></script>

Ukuze uhlanganise kabusha amafayela .less, vele uwagcine bese ulayisha kabusha ikhasi lakho. I-Less.js iyawahlanganisa futhi iwagcine endaweni yokugcina indawo.

Uhlelo lokusebenza lwe-Mac olungekho emthethweni

Uhlelo lokusebenza lwe-Mac olungekho emthethweni lubuka izinkomba zamafayela .less futhi luhlanganise ikhodi kumafayela endawo ngemva kokulondolozwa kwefayela elibukiwe .less. Uma uthanda, ungaguqula okuncamelayo kuhlelo lokusebenza ukuze kwenziwe minify ngokuzenzekelayo futhi iyiphi inkomba amafayela ahlanganisiwe agcina engenile.

Izinhlelo zokusebenza ezengeziwe

I-crunch

I-Crunch ingumhleli obukeka kahle KA-LESS kanye nomhlanganisi owakhelwe ku-Adobe Air.

I-CodeKit

Idalwe umfana ofanayo nohlelo lokusebenza lwe-Mac olungekho emthethweni, i-CodeKit iwuhlelo lokusebenza lwe-Mac oluhlanganisa i-LESS, i-SASS, i-Stylus, ne-CoffeeScript.

Kulula

Uhlelo lokusebenza lwe-Mac, i-Linux, ne-Windows lokuhlanganisa nokudonsa nokudedela amafayela angu-LESS. Futhi, ikhodi yomthombo iku-GitHub .

Qala ngokushesha noma iyiphi iphrojekthi yewebhu ngokufaka i-CSS ehlanganisiwe noma encishisiwe ne-JS. Isendlalelo sezitayela zangokwezifiso ngokuhlukene ukuze kuthuthukiswe kalula nokunakekelwa okuqhubekela phambili.

Setha ukwakheka kwefayela

Landa i-Bootstrap ehlanganisiwe yakamuva futhi uyifake kuphrojekthi yakho. Ngokwesibonelo, ungase ube nento efana nale:

  uhlelo lokusebenza/
      izakhiwo/
      izifanekiso/
  umphakathi/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          ama-glyphicons-halflings-white.png

Sebenzisa isifanekiso sokuqala

Kopisha isisekelo se-HTML esilandelayo ukuze uqalise.

<html>
  <ikhanda>
    <isihloko> Isifanekiso se-Bootstrap 101 </title>
    <!-- I-Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </ikhanda>
  <umzimba>
    <h1> Sawubona, mhlaba! </h1>
    <!-- I-Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </umzimba>
</html>

Isendlalelo kukhodi yangokwezifiso

Sebenza nge-CSS yakho yangokwezifiso, i-JS, nokuningi njengoba kudingeka ukuze wenze i-Bootstrap ibe ngeyakho ngamafayela akho ahlukene e-CSS kanye ne-JS.

<html>
  <ikhanda>
    <isihloko> Isifanekiso se-Bootstrap 101 </title>
    <!-- I-Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Iphrojekthi -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </ikhanda>
  <umzimba>
    <h1> Sawubona, mhlaba! </h1>
    <!-- I-Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Iphrojekthi -->
    <script src = "public/js/application.js" ></script> 
  </umzimba>
</html>

Inweba i-Bootstrap

Yakhiwe nge-LESS