Wedzera · Bootstrap mumutauro waSean

Bootstrap inogadzirwa neLESS pamusimboti wayo, mutauro wesheetti ine simba wakagadzirwa neshamwari yedu yakanaka, Alexis Sellier . Inoita kugadzira masisitimu-yakavakirwa CSS nekukurumidza, nyore, uye kunakidza.

Sei ZVINODZIKA?

Mumwe wevagadziri veBootstrap akanyora nekukurumidza blog positi nezve izvi , zvakapfupikiswa pano:

Bootstrap inogadzira nekukurumidza ~ 6x nekukurumidza neIshoma ichienzaniswa neSass
Zvishoma zvakanyorwa muJavaScript, zvichiita kuti zvive nyore kwatiri kunyura mukati uye chigamba tichienzaniswa naRuby neSass.
Zvishoma zvakawanda; tinoda kunzwa sekunge tiri kunyora CSS uye kuita kuti Bootstrap isvike kune vese.

Chii chinosanganisirwa?

Sewedzero yeCSS, LESS inosanganisira zvinoshanduka, musanganiswa wekudzoreredza snippets yekodhi, mashandiro emasvomhu akareruka, nesting, uye kunyange mavara mabasa.

Dzidza zvimwe

Shanyira webhusaiti yepamutemo pa http://lesscss.org/ kuti udzidze zvakawanda.

Sezvo CSS yedu yakanyorwa neZvishoma uye ichishandisa zvinosiyana uye musanganiswa, inoda kuunganidzwa kuitira kwekupedzisira kugadzirwa kwekuita. Heino maitiro.

Ongorora: Kana iwe uri kuendesa chikumbiro chekudhonza kuGitHub ine yakagadziridzwa CSS, unofanirwa kudzorera iyo CSS kuburikidza neipi yeidzi nzira.

Zvishandiso zvekugadzira

Command line

Tevedza mirairo iri mupurojekiti readme paGitHub yekunyora kuburikidza nemutsara wekuraira.

JavaScript

Dhawunirodha yazvino Les.js uye sanganisira nzira yekuenda nayo (uye Bootstrap) mu <head>.

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

Kuti uunganidze zvakare mafaira .less, ingoachengeta uye worodha peji rako zvakare. Less.js inozviunganidza uye nekuzvichengeta munzvimbo yekuchengetedza.

Unofficial Mac app

Iyo isina pamutemo Mac app inoona madhairekitori e.less mafaira uye inounganidza kodhi kumafaira emunharaunda mushure mesevha yega yega yakatariswa .less faira. Kana iwe uchida, iwe unogona kushandura zvaunofarira muapp kuti uite miniifying uye iyo dhairekitori iyo akaunganidzwa mafaera anoguma mukati.

Mamwe mapurogiramu

Crunch

Crunch inotaridzika zvakanaka LESS mupepeti uye mugadziri akavakirwa paAdobe Air.

CodeKit

Yakagadzirwa nemukomana mumwechete seasina pamutemo Mac app, CodeKit iMac app inogadzira LESS, SASS, Stylus, uye CoffeeScript.

Zviri nyore

Mac, Linux, uye Windows app yekukweva uye kudonhedza kuunganidza kwema LESS mafaera. Uyezve, iyo kodhi kodhi iri paGitHub .

Kurumidza tanga chero webhu purojekiti nekudonhedza mune yakabatanidzwa kana minified CSS uye JS. Layer pazvitaera zvetsika zvakaparadzana kuti zvive nyore kusimudzira uye kugadzirisa kunoenderera mberi.

Seta faira chimiro

Dhawunirodha yazvino yakaunganidzwa Bootstrap uye isa mupurojekiti yako. Somuenzaniso, unogona kuva nechimwe chinhu chakadai:

  app/
      marongero/
      templates/
  ruzhinji/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Shandisa template yekutanga

Kopa HTML inotevera kuti utange.

<html>
  <head>
    <title> Bootstrap 101 template </ musoro>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <muviri>
    <h1> Mhoro, nyika! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </ body>
</html>

Layer pane custom code

Shanda mune yako CSS, JS, uye zvimwe sezvinodiwa kuti uite Bootstrap yako neyako yakaparadzana CSS uye JS mafaera.

<html>
  <head>
    <title> Bootstrap 101 template </ musoro>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Chirongwa -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <muviri>
    <h1> Mhoro, nyika! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Chirongwa -->
    <script src = "public/js/application.js" ></script> 
  </ body>
</html>

Kuwedzera Bootstrap

Yakavakwa neLESS