Griglia Bootstrap - Piccoli dispositivi
Esempio di griglia Bootstrap: piccoli dispositivi
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
Supponiamo di avere un layout semplice con due colonne. Vogliamo che le colonne siano suddivise del 25%/75% per i dispositivi di piccole dimensioni.
Suggerimento: per dispositivi di piccole dimensioni si intende una larghezza dello schermo compresa tra 768 pixel e 991 pixel .
Per i piccoli dispositivi utilizzeremo le .col-sm-*classi.
Aggiungeremo le seguenti classi alle nostre due colonne:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Ora Bootstrap dirà "alle piccole dimensioni, cerca le classi con -sm- in esse e usa quelle".
L'esempio seguente risulterà in una suddivisione del 25%/75% su dispositivi piccoli (e medi e grandi). Su dispositivi extra piccoli, si accumulerà automaticamente (100%):
Esempio
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Nota: assicurati che la somma sia sempre 12.
Per una suddivisione del 33,3%/66,6%, dovresti utilizzare .col-sm-4e .col-sm-8:
Esempio
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Il prossimo capitolo mostra come aggiungere una percentuale di suddivisione diversa per i dispositivi medi.