Pwolonje · Bootstrap an Kreyòl (Ayiti)

Bootstrap fèt ak LESS nan nwayo li yo, yon langaj stylesheet dinamik kreye pa bon zanmi nou an, Alexis Sellier . Li fè devlope CSS ki baze sou sistèm pi vit, pi fasil, ak plis plezi.

Poukisa MWEN?

Youn nan kreyatè Bootstrap yo te ekri yon pòs blog rapid sou sa a , rezime isit la:

Bootstrap konpile pi vit ~ 6 fwa pi vit ak mwens konpare ak Sass
Mwens ekri nan JavaScript, sa ki fè li pi fasil pou nou plonje nan ak plak konpare ak Ruby ak Sass.
Mwens se plis; nou vle santi tankou nou ap ekri CSS epi fè Bootstrap apwoche a tout moun.

Ki sa ki enkli?

Kòm yon ekstansyon CSS, LESS gen ladan varyab, melanj pou fragments kòd ki kapab itilize ankò, operasyon pou matematik senp, nidifikasyon, e menm fonksyon koulè.

Aprann plis

Vizite sit entènèt ofisyèl la nan http://lesscss.org/ pou aprann plis.

Depi CSS nou an ekri ak mwens epi itilize varyab ak mixin, li bezwen konpile pou aplikasyon final pwodiksyon an. Men ki jan.

Remak: Si w ap soumèt yon demann rale nan GitHub ak CSS modifye, ou dwe rekonpile CSS la atravè nenpòt nan metòd sa yo.

Zouti pou konpile

Ne ak makefile

Enstale konpilateur liy lòd LESS, JSHint, Recess, ak uglify-js globalman ak npm lè w kouri lòd sa a:

$ npm enstale -g mwens jshint rekreyasyon uglify-js

Yon fwa enstale jis kouri makesoti nan rasin lan nan anyè bootstrap ou a epi w ap tout mete.

Anplis de sa, si w gen watchr enstale, ou ka kouri make watchpou fè bootstrap rebati otomatikman chak fwa ou edite yon dosye nan lib bootstrap la (sa a pa obligatwa, jis yon metòd pratik).

Liy lòd

Enstale zouti nan liy lòd LESS atravè Node epi kouri lòd sa a:

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

Asire w ou mete --compressnan kòmandman sa a si w ap eseye pou sove kèk octets!

JavaScript

Telechaje dènye Less.js la epi mete chemen pou li (ak Bootstrap) nan <head>.

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

Pou rekonpile dosye .less yo, jis sove yo epi rechaje paj ou a. Less.js konpile yo epi estoke yo nan depo lokal yo.

Aplikasyon Mac ki pa ofisyèl

Aplikasyon Mac ki pa ofisyèl la ap gade anyè dosye .less epi li konpile kòd la nan dosye lokal yo apre chak sove yon dosye .less gade. Si ou renmen, ou ka aktive preferans nan aplikasyon an pou minifying otomatik ak nan ki anyè dosye konpile yo fini.

Plis apps

Crunch

Crunch se yon gwo editè ak yon konpilateur ki gen MWEN kap bati sou Adobe Air.

CodeKit

CodeKit se yon aplikasyon Mac ki te kreye pa menm nèg ak aplikasyon ofisyèl Mac ki konpile LESS, SASS, Stylus, ak CoffeeScript.

Senp

Mac, Linux, ak Windows aplikasyon pou trennen ak gout konpile nan MWEN dosye. Anplis, kòd sous la se sou GitHub .

Byen vit kòmanse nenpòt pwojè entènèt pa jete nan konpile oswa minified CSS la ak JS. Kouch sou estil koutim separeman pou amelyorasyon fasil ak antretyen avanse.

Enstalasyon estrikti dosye

Telechaje dènye Bootstrap konpile a epi mete l nan pwojè w la. Pou egzanp, ou ta ka gen yon bagay tankou sa a:

  app/
      layouts/
      modèl/
  piblik/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Sèvi ak modèl starter

Kopi HTML baz sa a pou kòmanse.

<html>
  <tèt>
    <title> Bootstrap 101 Modèl </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </tèt>
  <kò>
    <h1> Bonjou, lemonn! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </kò>
</html>

Kouch sou kòd koutim

Travay nan CSS, JS ak plis ankò jan sa nesesè pou fè Bootstrap pwòp ou a ak pwòp dosye CSS ak JS separe ou.

<html>
  <tèt>
    <title> Bootstrap 101 Modèl </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Pwojè -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </tèt>
  <kò>
    <h1> Bonjou, lemonn! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Pwojè -->
    <script src = "public/js/application.js" ></script> 
  </kò>
</html>

Pwolonje Bootstrap

Bati ak MWEN