Twitter Bootstrap ".container" class: come usarlo semanticamente?

Question

Un giorno ho deciso di giocare con Twitter Bootstrap. L'ho trovato fantasticamente ben fatto, ma non sono un fan di tutte quelle classi che inquinano il mio html.

Quindi sto cercando di usare Less per renderlo più semantico. Stavo facendo abbastanza bene fino a quando passo alla classe .container. È presente un mix nel file "mixins.less" (riga 580) che imposta la larghezza del contenitore. Ma non riesco a farlo funzionare senza includere la classe direttamente sull'html. Ricevo sempre errori di compilazione quando lo inserisco nel mio file personalizzato. Ho provato a copiare e inserire quello nel mio file, ma senza successo ... qualcuno ha superato questo?

Ovviamente, potrei forzare manualmente la larghezza, ma non penso che sarebbe l'approccio migliore. Qualche idea?

Answer 1

This è di gran lunga il miglior trattamento che abbia mai trovato. Prendendo in prestito dagli esempi autori:

La maggior parte delle persone usano questo:

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

Se siete come me, allora si sta cercando di arrivare a questo:

<!- 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

Il problema con la risposta di cui sopra è che makeRow() e makeColumn() mixins non sono responsive. Non vedevo l'ora di scrivere nomi di classi semantici ma non ho visto i risultati come quando scrivevo per esempio riga e span6 offset1 nomi di classe.

È possibile controllare https://github.com/twitter/bootstrap/issues/2242 per ulteriori informazioni.