tamaño secciones rejillas medidas filas example español espacio entre div container bootstrap css twitter-bootstrap

css - rejillas - secciones bootstrap



ancho de fila de fluido de arranque (1)

en bootstrap-responsive.css

.row-fluid .span10{ width: 91.45299145299145%; *width: 91.39979996362975%; }

Estaba configurando el tamaño, pero tengo curiosidad por saber cómo obtuvieron estos números, y ¿por qué tienen una precisión de 14 decimales?


Comienzan con tres valores, que pueden ser definidos por el usuario:

@gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px;

Editar: en Bootstrap 3.0+, las variables ahora son:

@grid-columns @grid-gutter-width @grid-float-breakpoint // the point at which the navbar stops collapsing

Y calcule el ancho de fila fijo:

@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Luego se vuelven fluidos:

@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

Y finalmente, generar todos los tramos (eso es un poco confuso):

.spanX (@index) when (@index > 0) { (~".span@{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 ven, MENOS las divisiones y multiplicaciones.

Véalo usted mismo:

  1. https://github.com/twitter/bootstrap/blob/master/less/variables.less
  2. https://github.com/twitter/bootstrap/blob/master/less/mixins.less