Ɛkstend · Bɔtstrap insay krayo langwej

Bootstrap na LESS na in kɔr, wan dinamik staylshit langwej we wi gud padi, Alexis Sellier , mek . I de mek fɔ divɛlɔp CSS we de bays pan sistem fast, izi, ɛn fayn.

Wetin mek LƐS?

Wan pan di wan dɛn we mek Bootstrap rayt wan kwik blɔk post bɔt dis , we dɛn sɔmariz ya:

Bootstrap kompila fasta ~6x fasta wit Less kompare to Sass
Less de rayt insay JavaSkript, we de mek am izi fɔ wi fɔ dayv insay ɛn patch kɔmpia to Ruby wit Sass.
Less na mɔ; wi wan fil lek wi de rait CSS en mek Bootstrap aprochable to ol.

Wetin de insay?

As ɛkstenshɔn fɔ CSS, LESS inklud vɛriɔbul dɛn, miksin fɔ riyuz snipɛt dɛn fɔ kɔd, ɔpreshɔn fɔ simpul mats, nɛst, ɛn ivin kɔlɔ fɛnshɔn dɛn.

Lan mɔ bɔt dis

Visit di ɔfishal wɛbsayt na http://lesscss.org/ fɔ lan mɔ.

Bikɔs wi CSS rayt wit Less ɛn yuz vɛriɔbul ɛn miksin, i nid fɔ kɔmpilayt fɔ fayn prodakshɔn implimɛnt. Na dis na aw fɔ du am.

Notis: If yu de sɛn pul riŋwe to GitHub wit CSS we dɛn dɔn chenj, yu fɔ kɔmpilayt di CSS bak bay ɛni wan pan dɛn we ya.

Tul dɛn fɔ kɔmpilayt

Kɔmand layn

Fɔ fala di instrɔkshɔn dɛn na di prɔjek readme na GitHub fɔ kɔmpilayt via kɔmand layn.

JavaSkript fɔ di Baybul

Daunlod di laytst Less.js ɛn put di rod fɔ go de (ɛn Bootstrap) insay di <head>.

<link rel = "staylshit/lɛs" href = "/pat/to/bɔtstrap.lɛs" > <skript src = "/pat/to/lɛs.js" ></script>

Fɔ kɔmpilayt di .less fayl dɛn bak, jɔs sev dɛn ɛn lod yu pej bak. Less.js de kɔmpilayt dɛn ɛn kip dɛn na lokal stɔrɔj.

Mac ap we nɔ gɛt ɔfishal wan

Di ɔnofishal Mac ap de wach dairektrɔ dɛn fɔ .less fayl dɛn ɛn kɔmpilayt di kɔd to lokal fayl dɛn afta ɛvri sev we dɛn dɔn sev .less fayl we dɛn wach. If yu want, yu kin chenj di tin dɛn we yu lɛk na di ap fɔ mek yu ebul fɔ smɔl smɔl ɛn us dairektrɔ di fayl dɛn we dɛn dɔn kɔmpilayt kin dɔn insay.

Mɔ ap dɛn

Krunch fɔ di wan dɛn we de

Crunch na wan fayn lukin LESS ɛditɔ ɛn kɔmpayla we dɛn bil pan Adobe Air.

KodKit fɔ di Baybul

Na di sem man we di ɔnofishal Mac ap mek am, CodeKit na Mac ap we de kɔmpilayt LESS, SASS, Stylus, ɛn CoffeeScript.

I nɔ simpul

Mac, Linux, ɛn Windows ap fɔ drɛg ɛn drɔp kɔmpilayt fɔ LESS fayl dɛn. Plɛs, di sɔs kɔd de na GitHub .

Start ɛni wɛb prɔjek kwik kwik wan bay we yu drɔp di CSS ɛn JS we dɛn dɔn kɔmpilayt ɔ we dɛn dɔn smɔl. Layer pan kɔstɔm stayl dɛn sɛpret fɔ izi ɔpgrɛd ɛn mentenɛns fɔ go bifo.

Setup fayl strɔkchɔ

Daunlod di laytst Bootstrap we dɛn dɔn kɔmpilayt ɛn put am insay yu prɔjek. Fɔ ɛgzampul, yu kin gɛt sɔntin lɛk dis:

  ap/
      layout dɛn/ .
      tɛmplat dɛn/ .
  pɔblik/
      css/ fɔ .
          di bכtstrap.min.css
      js/ .
          bootstrap.min.js fɔ di wan dɛn we de wok
      img/ .
          glifikɔn dɛn-afling dɛn.png
          glyphicons-afling dɛn-wayt.png

Yuz di stata tɛmplat

Kɔpi di bays HTML we de dɔŋ ya fɔ bigin.

<html> fɔ di wan dɛn we de
  <hɛd>
    <taytul> Bootstrap 101 Template </taytul>
    <!-- Bɔtstrap -->
    <link href = "pɔblik/css/bɔtstrap.min.css" rel = "staylshit" >  
  </hɛd>
  <bɔdi>
    <h1> Halo, wɔl! </h1> fɔ di wan dɛn we de
    <!-- Bɔtstrap -->
    <skript src = "pɔblik/js/bɔtstrap.min.js" ></skript> 
  </bɔdi>
</html> fɔ di wan dɛn we de

Layer pan kɔstɔm kɔd

Wok insay yu kɔstɔm CSS, JS, ɛn mɔ as nid de fɔ mek Bootstrap yu yon wit yu yon sɛpret CSS ɛn JS fayl dɛn.

<html> fɔ di wan dɛn we de
  <hɛd>
    <taytul> Bootstrap 101 Template </taytul>
    <!-- Bɔtstrap -->
    <link href = "pɔblik/css/bɔtstrap.min.css".  rel = "staylshit" >
    <!-- Projɛkt -->
    <link href = "pɔblik/css/aplikeshɔn.css" rel   = "staylshit" >
  </hɛd>
  <bɔdi>
    <h1> Halo, wɔl! </h1> fɔ di wan dɛn we de
    <!-- Bɔtstrap -->
    <skript src = "pɔblik/js/bɔtstrap.min.js" ></skript> 
    <!-- Projɛkt -->
    <skript src = "pɔblik/js/aplikeshɔn.js" ></script> 
  </bɔdi>
</html> fɔ di wan dɛn we de

Fɔ ɛkstɛnd di Bootstrap

Dɛn bil am wit LƐS