Comienzan con tres valores, que pueden ser definidos por el usuario:
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
Editar: en Bootstrap 3.0+, las variables son ahora:
@grid-columns
@grid-gutter-width
@grid-float-breakpoint // the point at which the navbar stops collapsing
y calcular el ancho fijo fila :
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
Luego van fluido:
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
Y finaly, generan todos los tramos (que es un poco confuso):
.spanX (@index) when (@index > 0) {
(~"[email protected]{index}") { .span(@index); }
.spanX(@index - 1);
}
.span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5/@gridRowWidth * 100 * 1%);
}
.row-fluid {
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
Como se ve, MENOS hace las divisiones y multiplicaciones.
verlo usted mismo:
- https://github.com/twitter/bootstrap/blob/master/less/variables.less
- https://github.com/twitter/bootstrap/blob/master/less/mixins.less
respuesta agradable. Una pregunta: ¿dónde se pueden modificar los valores definidos por el usuario? Estoy intentando actualizar el espacio entre columnas sin ajustar manualmente los porcentajes. – Blake
Lo encontré. Puede personalizar los valores aquí y luego volver a descargar el paquete de arranque. - http://getbootstrap.com/2.3.2/customize.html – Blake