Ampliar · Twitter Bootstrap en català

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

Node amb makefile

Instal·leu el compilador de línia d'ordres LESS, JSHint, Recess i uglify-js globalment amb npm executant l'ordre següent:

$ npm install -g menys jshint recess uglify-js

Un cop instal·lat, només heu d'executar make-lo des de l'arrel del vostre directori d'arrencada i ja esteu a punt.

A més, si teniu watchr instal·lat, podeu executar make watchperquè bootstrap es reconstrueixi automàticament cada vegada que editeu un fitxer a la llibreria d'arrencada (això no és necessari, només un mètode còmode).

Línia d'ordres

Instal·leu l'eina de línia d'ordres LESS mitjançant Node i executeu l'ordre següent:

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

Assegureu-vos d'incloure --compressaquesta comanda si esteu intentant desar alguns bytes!

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
       └── glificons - halflings - blanc . png

Utilitzeu la plantilla inicial

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>

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.

<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>

Estenent Bootstrap

Construït amb MENYS