Twitter Bootstrap

De WikiEducator
Saltar a: navegación, buscar


Conceptos generales

  • Twitter Bootstrap permite trabajar con less o con sass
  • Nosotros trabajaremos con less que viene "desde siempre" en Twitter Bootstrap.
  • Permite manejar variables, mixins, reglas anidadas...
  • Lo más práctico es mirar la parte de características del lenguaje less dentro de su web.

Variables

  • Código en less:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}
  • Se procesa y genera el siguiente css:
#header {
  color: #6c94be;
}

Mixins

  • Podemos incluir un conjunto de propiedades de una regla css dentro de otras reglas:
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
 
.post a {
  color: red;
  .bordered;
}

Reglas anidadas

  • En css sería:
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
  • Mediante less puede quedar más fácil de lectura:
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Instalación de less

  • Se instala mediante npm. Si no dispones del comando, lee la última parte del wiki (themes) para instalar npm.
npm install less -g

less y Twitter Botstrap

  • Debemos descargar la versión de Twitter Bootstrap que viene con less
  • En la carpeta less encontraremos un fichero .less por cada componente de css del framework.
  • El fichero bootstrap.less enlaza todos ellos:
juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ cat bootstrap.less 
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
 
// Reset
@import "normalize.less";
@import "print.less";
 
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
 
// Components
@import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "button-groups.less";
....
  • Comprobación instalación y versión de less:
juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ which lessc
/usr/local/bin/lessc
juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ lessc -version
lessc 1.6.3 (LESS Compiler) [JavaScript]
  • Generación del fichero css:
juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ lessc bootstrap.less bootstrap.css