Bootstrap Griglia Esempio: piccoli dispositivi
Supponiamo di avere un layout semplice con due colonne. Vogliamo le colonne da dividere 25%/75% per piccoli dispositivi.
Suggerimento: i dispositivi piccoli sono definiti come aventi una larghezza dello schermo da 768 pixel a 991 pixel.
Per i dispositivi di piccole dimensioni useremo i .col-sm-* classi.
Noi aggiungeremo le seguenti classi per i nostri due colonne:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Ora Bootstrap sta per dire "alla piccola dimensione, cercare le classi con -sm- in loro e usare quelli".
Il seguente esempio si tradurrà in un 25%/75% diviso su piccoli (e medi e grandi) dispositivi. Su piccoli dispositivi supplementari, esso impilare 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> Prova tu stesso " Nota: Assicurarsi che la somma si aggiunge sempre fino a 12.
Per un / 66,6% diviso 33,3%, si può usare .col-sm-4 e .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> Prova tu stesso " Il prossimo capitolo mostra come aggiungere un diverso diviso per cento per i dispositivi di media.