Bootstrap Griglia Esempio: Stacked-to-orizzontale
Creeremo un sistema di rete di base che inizia impilati sui cellulari / compresse (piccoli dispositivi), prima di diventare orizzontale sul desktop (medio / grandi dispositivi).
L'esempio seguente mostra una semplice layout a due colonne "stacked-to-orizzontale", significa che si tradurrà in un / 50% split 50% su tutti gli schermi, tranne per piccoli schermi extra, che verrà automaticamente pila (100%):
Esempio: Stacked-to-orizzontale
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Prova tu stesso " Suggerimento: I numeri nei .col-sm-* classi indica quante colonne del div dovrebbe estendersi (su 12). Così, .col-sm-1 campate 1 colonna, .col-sm-4 campate 4 colonne, .col-sm-6 campate 6 colonne, ecc
Nota: Assicurarsi che la somma si aggiunge sempre fino a 12!
Suggerimento: è possibile trasformare qualsiasi layout a larghezza fissa in un layout di grande ampiezza cambiando la .container classe per .container-fluid :
Esempio: contenitore del liquido
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Prova tu stesso "