Estenent Bootstrap

Amplieu Bootstrap per aprofitar els estils i components inclosos, així com les variables i mixins LESS.

Caps amunt! Aquests documents són per a la v2.3.2, que ja no és compatible oficialment. Fes una ullada a la darrera versió de Bootstrap!
MENYS CSS

Bootstrap està fet amb LESS en el seu nucli, un llenguatge de full d'estil dinàmic creat pel nostre bon amic, Alexis Sellier . Fa que el desenvolupament de CSS basat en sistemes sigui més ràpid, fàcil i divertit.

Per què MENYS?

Un dels creadors de Bootstrap va escriure una publicació ràpida al blog sobre això , resumida aquí:

  • Bootstrap es compila més ràpid ~ 6 vegades més ràpid amb Less en comparació amb Sass
  • Menys s'escriu en JavaScript, cosa que ens facilita submergir-nos i aplicar pedaços en comparació amb Ruby amb Sass.
  • Menys és més; volem tenir la sensació que estem escrivint CSS i fent que Bootstrap sigui accessible per a tothom.

Què inclou?

Com a extensió de CSS, LESS inclou variables, mixins per a fragments de codi reutilitzables, operacions per a matemàtiques simples, nidificació i fins i tot funcions de color.

Aprèn més

Visiteu el lloc web oficial a http://lesscss.org/ per obtenir més informació.

Com que el nostre CSS està escrit amb Less i utilitza variables i mixins, s'ha de compilar per a la implementació final de la producció. Heus aquí com.

Nota: si esteu enviant una sol·licitud d'extracció a GitHub amb CSS modificat, heu de tornar a compilar el CSS mitjançant qualsevol d'aquests mètodes.

Eines per compilar

Línia d'ordres

Seguiu les instruccions del projecte readme a GitHub per compilar mitjançant la línia d'ordres.

JavaScript

Baixeu l'últim Less.js i incloeu-hi el camí (i Bootstrap) al fitxer <head>.

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

Per recompilar els fitxers .less, només cal que els deseu i torneu a carregar la vostra pàgina. Less.js els compila i els emmagatzema a l'emmagatzematge local.

Aplicació no oficial per a Mac

L'aplicació no oficial per a Mac mira directoris de fitxers .less i compila el codi en fitxers locals després de cada desat d'un fitxer .less vist. Si voleu, podeu canviar les preferències a l'aplicació per a la compressió automàtica i en quin directori acaben els fitxers compilats.

Més aplicacions

Cruixent

Crunch és un editor i compilador LESS fantàstic construït a Adobe Air.

CodeKit

Creada pel mateix noi que l'aplicació no oficial per a Mac, CodeKit és una aplicació per a Mac que compila LESS, SASS, Stylus i CoffeeScript.

Senzill

Aplicació per a Mac, Linux i Windows per arrossegar i deixar anar la compilació de fitxers LESS. A més, el codi font es troba a GitHub .

Inicieu ràpidament qualsevol projecte web deixant anar el CSS i el JS compilats o minificats. Capa d'estils personalitzats per separat per a actualitzacions i manteniment fàcils en endavant.

Configura l'estructura del fitxer

Baixeu l'últim Bootstrap compilat i col·loqueu-lo al vostre projecte. Per exemple, podeu tenir alguna cosa com això:

  aplicació/
      dissenys/
      plantilles/
  públic/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Utilitzeu la plantilla inicial

Copieu el següent HTML base per començar.

  1. <html>
  2. <cap>
  3. <title> Plantilla Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "full d'estil" >
  6. </cap>
  7. <cos>
  8. <h1> Hola, món! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </cos>
  12. </html>

Capa sobre codi personalitzat

Treballeu al vostre CSS, JS i més personalitzats segons sigui necessari per fer que Bootstrap sigui el vostre amb els vostres fitxers CSS i JS separats.

  1. <html>
  2. <cap>
  3. <title> Plantilla Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "full d'estil" >
  6. <!-- Projecte -->
  7. <link href = "public/css/application.css" rel = "full d'estil" >
  8. </cap>
  9. <cos>
  10. <h1> Hola, món! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Projecte -->
  14. <script src = "public/js/application.js" ></script>
  15. </cos>
  16. </html>