El problema
● No es porque tienen la misma cantidad de líneas.
● No es porque .row se asemeja a TR.● No es porque se está usando un sistema de
grid.
El problema
Estamos definiendo la presentación de nuestro contenido en el mismo HTML.
.pull-left
.col-md-6
.img-responsive
.show
.clearfix
.hide
.pull-right
.img-circle
.col-sm-offset-2
.row
¿Qué es LESS?
● CSS con vitaminas● Te permite usar:
○ Variables○ Funciones○ Operadores○ Selectores Anidados○ Etc.
Separando Contenido de Diseño
Less permite remover totalmente de nuestro HTML las clases de Bootstrap.
Incorporando las bondades de Less
Poder utilizar variables, operadores, mixins y funciones, mejora considerablemente el esquema de trabajo.
Reduciendo el peso del archivo final
Importando solo lo que necesitamos para nuestro proyecto puede reducir el archivo de Bootstrap considerablemente.
Lo que quiero usar
Lo que Bootstrap me obliga a usar
20%
80%
Funciones (Mixins)
● .container -> .container();● .row -> .make-row();● .col-md-8 -> .make-md-column(8);● .col-md-offset-2 -> .make-md-column-offset(2)● .bg-info -> background: @brand-info;● .text-info -> color: @brand-info;
Consejos finales● Utiliza SASS o LESS en tus proyectos (tutorial).● No adaptes tu HTML a Bootstrap o incl1uso a tu mismo
CSS. ● Lectura recomendada: