Twitter Bootstrap clase ".container": ¿cómo usarlo semánticamente?

Question

Hace un día decidí jugar con Twitter Bootstrap. Lo encontré fantásticamente bien diseñado, pero no soy fanático de todas esas clases que contaminan mi html.

Así que estoy tratando de usar Less para hacerlo más semántico. Me estaba yendo bastante bien hasta que pisé la clase .container. Hay una mixin en el archivo "mixins.less" (línea 580) que establece el ancho del contenedor. Pero no puedo hacer que funcione sin incluir la clase directamente en el html. Siempre obtengo errores de compilación al ponerlo en mi archivo personalizado. Intenté copiar e insertar eso en mi archivo, pero sin éxito ... ¿alguien ha pasado por esto?

Por supuesto, podría forzar el ancho manualmente, pero no creo que sea el mejor enfoque. ¿Algunas ideas?

Answer 1

This es de lejos el mejor tratamiento que he encontrado hasta ahora. Los préstamos de los ejemplos de los autores:

La mayoría de la gente usa esto:

<div class="row"> 
    <div class="span6">...</div> 
    <div class="span6">...</div> 
</div> 

Si usted es como yo, entonces usted está tratando de llegar a este:

<!- our new, semanticized HTML --> 
<div class="article"> 
    <div class="main-section">...</div> 
    <div class="aside">...</div> 
</div> 

<!-- its accompanying Less stylesheet --> 
.article { 
    .makeRow();  // Mixin provided by Bootstrap 
    .main-section { 
    .makeColumn(10); // Mixin provided by Bootstrap 
    } 
    .aside { 
    .makeColumn(2); // Mixin provided by Bootstrap 
    } 
} 

Answer 2

El problema con la respuesta anterior es que las mezclas makeRow() y makeColumn() no responden. Tenía muchas ganas de escribir nombres de clase semántica, pero no vi los resultados, como cuando escribía, por ejemplo, fila y span6 offset1 nombres de clase.

Puede consultar https://github.com/twitter/bootstrap/issues/2242 para obtener más información.