Amplieu Bootstrap per aprofitar els estils i components inclosos, així com les variables i mixins LESS.
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.
Un dels creadors de Bootstrap va escriure una publicació ràpida al blog sobre això , resumida aquí:
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.
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.
Seguiu les instruccions del projecte readme a GitHub per compilar mitjançant la línia d'ordres.
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.
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.
Crunch és un editor i compilador LESS fantàstic construït a Adobe Air.
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.
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.
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
Copieu el següent HTML base per començar.
- <html>
- <cap>
- <title> Plantilla Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "full d'estil" >
- </cap>
- <cos>
- <h1> Hola, món! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </cos>
- </html>
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.
- <html>
- <cap>
- <title> Plantilla Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "full d'estil" >
- <!-- Projecte -->
- <link href = "public/css/application.css" rel = "full d'estil" >
- </cap>
- <cos>
- <h1> Hola, món! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projecte -->
- <script src = "public/js/application.js" ></script>
- </cos>
- </html>