Il diffuso framework CSS Twitter Bootstrap viene distribuito di default con un grid system che permette di creare dei layout con una griglia frazionata fino ad un massimo di 12 colonne. Per la maggior parte dei casi, le combinazioni possibili sono più che sufficienti per la creazione di template articolati e creativi.
Supponiamo però di voler creare una griglia di thumbnail disposte su righe da 5 colonne della stessa dimensione. Questo non sarebbe possibile, in quanto il grid system permette il frazionamento solo per i divisori del numero massimo di colonne (12). Si evince quindi che è possibile creare solo griglie da 1,2,3,4 o 12 colonne.
Possiamo però espandere la griglia standard con poche righe di codice css, creando 4 nuove classi, ognuna per ogni breakpoint del layout responsive: xs-, sm-, md-, lg-.
.col-xs-2-5,
.col-sm-2-5,
.col-md-2-5,
.col-lg-2-5 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-xs-2-5 {
width: 20%;
}
@media (min-width: 768px) {
.col-sm-2-5 {
float: left;
}
.col-sm-2-5 {
width: 20%;
}
}
@media (min-width: 992px) {
.col-md-2-5 {
float: left;
}
.col-md-2-5 {
width: 20%;
}
}
@media (min-width: 1200px) {
.col-lg-2-5 {
float: left;
}
.col-lg-2-5 {
width: 20%;
}
}Ora siamo pronti per utilizzare le nuove classi nella costruzione del codice html, con producedura analoga a quella delle classi originali di Bootstrap:
<div class="row">
<div class="col-md-15 col-sm-3">
Content goes here.
</div>
<div class="col-md-15 col-sm-3">
Content goes here.
</div>
<div class="col-md-15 col-sm-3">
Content goes here.
</div>
<div class="col-md-15 col-sm-3">
Content goes here.
</div>
<div class="col-md-15 col-sm-3">
Content goes here.
</div>
<div class="col-md-15 col-sm-3">
Content goes here.
</div>
</div>La soluzione che abbiamo appena esaminato permette di estendere il grid system, mantenendo intatto il core di default del framework, e senza stravolgere la denominazione standard delle classi assegnate a ciascuna dimensione delle colonne.
Per esigenze di personalizzazione più avanzate, però, ci si può spingere anche oltre: tramite il configuratore di download, infatti, o compilando direttamente i file less prelevabili dalla repository GitHub di Bootstrap, è possibile impostare alcune variabili del grid system (@grid-columns ed eventualemente anche @grid-gutter-width) in modo da ottenere layout più complessi composti da 16, 20 o più colonne.