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

Komandlinio

Sekvu la instrukciojn en la projekto readme sur GitHub por kompili per komandlinio.

JavaScript

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/
  publika/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.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>