Bootstrap

Etendante Bootstrap

Etendi Bootstrap por utiligi inkluzivitajn stilojn kaj komponantojn, same kiel MALPLANIJajn variablojn kaj miksaĵojn.

Konstruita kun MALPLOPO

Malpli CSS

Bootstrap estas farita kun LESS ĉe ĝia kerno, dinamika stilfoliolingvo kreita de nia bona amiko, Alexis Sellier . Ĝi igas disvolvi CSS-bazitan sistemon pli rapida, pli facila kaj pli amuza.

Kial MALPLOPE?

Unu el la kreintoj de Bootstrap skribis rapidan blogan afiŝon pri tio , resumitan ĉi tie:

  • Bootstrap kompilas pli rapide ~6x pli rapide kun Less kompare kun Sass
  • Malpli estas skribita en JavaScript, faciligante al ni plonĝi kaj fliki kompare kun Ruby kun Sass.
  • Malpli estas pli; ni volas senti, ke ni skribas CSS kaj faras Bootstrap alirebla por ĉiuj.

Kio estas inkluzivita?

Kiel etendaĵo de CSS, LESS inkluzivas variablojn, miksaĵojn por reuzeblaj fragmentoj de kodo, operaciojn por simpla matematiko, nestumado kaj eĉ kolorfunkcioj.

Lernu pli

Vizitu la oficialan retejon ĉe http://lesscss.org/ por lerni pli.

Kompilante Bootstrap kun Malpli

Ĉar nia CSS estas skribita kun Less kaj utiligas variablojn kaj miksaĵojn, ĝi devas esti kompilita por fina produktada efektivigo. Jen kiel.

Noto: Se vi sendas tiri peton al GitHub kun modifita CSS, vi devas rekompili la CSS per iu el ĉi tiuj metodoj.

Iloj por kompili

Nodo kun makefile

Instalu la LESS komandlinian kompililon, JSHint, Recess kaj uglify-js tutmonde kun npm per la sekva komando:

$ npm instali -g malpli jshint receso uglify-js

Unufoje instalita nur rulu makede la radiko de via bootstrap dosierujo kaj vi estas tute preta.

Aldone, se vi havas watchr instalitan, vi povas kuri make watchpor ke bootstrap aŭtomate rekonstruu ĉiun fojon kiam vi redaktas dosieron en la bootstrap lib (ĉi tio ne estas bezonata, nur oportuna metodo).

Komandlinio

Instalu la LESS komandlinian ilon per Nodo kaj rulu la jenan komandon:

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

Nepre inkluzivu --compressen tiu komando se vi provas ŝpari kelkajn bajtojn!

Javaskripto

Elŝutu la plej novan Less.js kaj inkludu la vojon al ĝi (kaj Bootstrap) en la <head>.

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

Por rekompili la .malpli dosierojn, simple konservu ilin kaj reŝargu vian paĝon. Less.js kompilas ilin kaj konservas ilin en loka stokado.

Neoficiala Mac-apliko

La neoficiala Mac-aplikaĵo rigardas dosierujojn de .less dosieroj kaj kompilas la kodon al lokaj dosieroj post ĉiu konservado de rigardita .less dosiero. Se vi ŝatas, vi povas ŝanĝi preferojn en la aplikaĵo por aŭtomata minigo kaj en kiu dosierujo la kompilitaj dosieroj finiĝas.

Pli da programoj

Crunch

Crunch estas bonega LESS redaktilo kaj kompililo konstruita sur Adobe Air.

CodeKit

Kreita de la sama ulo kiel la neoficiala Mac-aplikaĵo, CodeKit estas Mac-apo kiu kompilas LESS, SASS, Stylus kaj CoffeeScript.

Simpla

Apliko Mac, Linukso kaj Vindozo por treni kaj faligi kompiladon de MALPLANIS dosierojn. Krome, la fontkodo estas sur GitHub .

Uzu kiel senmovaj valoraĵoj

Rapide komencu ajnan retprojekton faligante la kompilitajn aŭ minigitajn CSS kaj JS. Tavolo sur kutimaj stiloj aparte por facilaj ĝisdatigoj kaj bontenado antaŭen.

Agordu dosierstrukturon

Elŝutu la lastan kompilitan Bootstrap kaj metu en vian projekton. Ekzemple, vi eble havas ion tian:

  app / ├── aranĝoj / └── ŝablonoj / publikaj / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glifikonoj - duonuloj . png
       └── glifikonoj - duonuloj - blankaj . png

Uzu komencan ŝablonon

Kopiu la sekvan bazan HTML por komenci.

  1. <html>
  2.   <kapo>
  3.     <title> Bootstrap 101 Ŝablono </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stilfolio" >  
  6.   </kapo>
  7.   <korpo>
  8.     <h1> Saluton, mondo! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </korpo>
  12. </html>

Tavolo sur kutima kodo

Laboru en viaj kutimaj CSS, JS, kaj pli kiel necese por fari Bootstrap via propra per viaj apartaj CSS kaj JS-dosieroj.

  1. <html>
  2.   <kapo>
  3.     <title> Bootstrap 101 Ŝablono </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stilfolio" >  
  6.     <!-- Projekto -->
  7.     <link href = "public/css/application.css" rel = "stilfolio" >  
  8.   </kapo>
  9.   <korpo>
  10.     <h1> Saluton, mondo! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Projekto -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </korpo>
  16. </html>