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.
</div>
 
<div class="slide">
===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:
<source lang="bash">
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";
....