Extendit Bootstrap

Praetende Bootstrap ut stylos et componentes inclusos uti, nec minus variabiles et mixinas.

MINOR CSS

Bootstrap cum minori in suo nucleo facta est, lingua dynamica a nostro bono amico facta, Alexis Sellier . Ratio explicandi substructio CSS citius, facilius, et magis iocum facit.

Quid minoi?

Unus e auctoribus Bootstrap scripsit celeris stili de hoc , hic compendiose:

  • Bootstrap componit citius ~6x citius cum Minus comparari Sass
  • Minus scriptum est in JavaScript, quod facilius nobis intendere et inmittit comparari Ruby cum Sass.
  • Minor plus est; velimus sentire sicut nos scribimus CSS et faciens Bootstrap omnibus affabilis.

Quid comprehendit?

Prorogatio CSS, MINOR variabiles includit, mixins pro reusable excerpta codicis, operationes pro simplici math, nidificatione, ac etiam functionibus coloratis.

Discere plus

Visita rutrum in http://lesscss.org/ ut plura discas.

Cum nostra CSS scripta sit cum minoribus et variabilibus et mixinis utatur, compilari debet ad exsecutionem finalem productionis. Ecce quomodo.

Nota: Si petitionem trahere ad GitHub cum CSS modificatis exhibeas, debes CSS per quemlibet horum modorum rescribere.

Instrumenta componendis

Nodi cum makefile

Instrue minus mandatum lineae compilatoris, JSHint, Recessus, et globally-js deformis cum npm currendo mandatum hoc:

$ npm install -g minus jshint recessus deformis-js

Semel inauguratus es iustus makee radice presul tui bootstrap et omnes positi es.

Accedit, si speculator inauguratus es, currere potes ut make watchbootstrap automatice reaedificata omni tempore limam in bootstrap lib (hoc non exigatur, modo commodum sit).

Imperium linea

Linea instrumenti per Node inaugurare iubes et sequentia praecipere;

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

Vide ut --compressillud praeceptum comprehendas si bytes aliquos servare conaris!

Javascript

Download latest Less.js and include the path to it (and Bootstrap) in the <head>.

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

Files .less recomplare, tantum serva et paginam tuam reload. Less.js conficit ac reponit in loci reposita.

Priyatus Mac app

Mac app privatus directoria minorum imaginum custodit et codicem ad files locales componit postquam singulis praeter fasciculi speculatoris .less. Si libet, optiones toggle in app pro latae miniificationis et quae directorium imaginum compilatarum desinunt in.

Plures apps

Crunch

FRANGO magnum est aspiciens editorem minorem et compilator in Adobe Air aedificavit.

CodeKit

Ab eodem guy ac Mac app privatus, CodeKit est app Mac app qui MINOR, SASS, Stylus et CoffeeScript conscribit.

simplicitas

Mac, Linux, et Fenestra app pro reti et stilla componendis fasciculorum minorum. Plus, fons code in GitHub est .

Quamlibet projectam interretialem incipiunt mittendo in CSS et JS vel compilata vel diminuta. Iacuit stylorum consuetudinum separatim ad upgrades faciles et sustentationem progrediendi.

Setup lima compages

Download recentissimas Bootstrap compilata et locum in project tuo. Exempli gratia aliquid simile hoc habes;

  app / layouts / templates / public / css / bootstrap . _ _ _ _ _ min . css
   js / bootstrap . _ _ _ min . js
   img / glyphicons - dimidiatio . _ _ png
       └── glyphicon - dimidium album . _ png
  
  
  
  
     
     
      

Template utendum starter

Effingo sequenti basi HTML ut incipiat.

  1. <html>
  2. <caput>
  3. <title> Bootstrap 101 Formulae </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <body>
  8. <h1> Salve, mundi! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Iacuit in codice mos

Operare in consuetudine tua CSS, JS, et plus quam necesse est ut proprium tuum Bootstrap efficias cum fasciculis separatis CSS et JS.

  1. <html>
  2. <caput>
  3. <title> Bootstrap 101 Formulae </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Project -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <body>
  10. <h1> Salve, mundi! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Project -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>