Yandisa · Bootstrap isiXhosa

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.

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

Umgca womyalelo

Landela imiyalelo kwiprojekthi yokufunda kwi-GitHub yokuqulunqa ngomgca womyalelo.

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 .

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.

<html>
  <intloko>
    <isihloko> I-Bootstrap 101 Template </ isihloko>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </ intloko>
  <umzimba>
    <h1> Molo, hlabathi! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </ umzimba>
</html>

Umaleko kwikhowudi yesiko

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

<html>
  <intloko>
    <isihloko> I-Bootstrap 101 Template </ isihloko>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Iprojekthi -->
    <link href = "public/css/application.css" rel = "icwecwe lesimbo" >  
  </ intloko>
  <umzimba>
    <h1> Molo, hlabathi! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Iprojekthi -->
    <script src = "public/js/application.js" ></script> 
  </ umzimba>
</html>

Ukwandiswa kweBootstrap

Yakhiwe nge-LESS