Pwolonje Bootstrap

Pwolonje Bootstrap pou pran avantaj de estil ak konpozan ki enkli, ansanm ak MWEN varyab ak mixin.

Tèt leve! Dokiman sa yo se pou v2.3.2, ki pa ofisyèlman sipòte ankò. Tcheke dènye vèsyon Bootstrap la!
MWEN CSS

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

Liy lòd

Swiv enstriksyon yo nan pwojè readme sou GitHub pou konpile atravè liy lòd.

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.

  1. <html>
  2. <tèt>
  3. <title> Bootstrap 101 Modèl </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </tèt>
  7. <kò>
  8. <h1> Bonjou, lemonn! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </kò>
  12. </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.

  1. <html>
  2. <tèt>
  3. <title> Bootstrap 101 Modèl </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Pwojè -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </tèt>
  9. <kò>
  10. <h1> Bonjou, lemonn! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Pwojè -->
  14. <script src = "public/js/application.js" ></script>
  15. </kò>
  16. </html>