Bootstrap Exemplu Grid: Stivuit-to-orizontale
Vom crea un sistem grilă de bază , care începe stivuite pe telefoane mobile / tablete (small devices) , înainte de a deveni orizontal pe desktop - uri (medium/large devices) .
Următorul exemplu arată un simplu "stacked-to-horizontal" aspect două coloane, ceea ce înseamnă că va avea ca rezultat o / 50% divizat 50% pe toate ecranele, cu excepția ecrane mici suplimentare, care va stivă automat (100%) :
Exemplu: Stivuit-to-orizontale
<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> Încearcă - l singur » Sfat: Numerele din .col-sm-* clase indică cât de multe coloane cu elementul div ar trebui sa acopere (out of 12) . Deci, .col-sm-1 deschideri 1 coloane, .col-sm-4 deschideri 4 coloane, .col-sm-6 deschideri 6 coloane, etc.
Notă: Asigurați - vă că suma se adaugă întotdeauna până la 12!
Sfat: Puteți transforma orice aspect lățime fixă într - un aspect cu lățime completă prin schimbarea .container clasa a .container-fluid de :
Exemplu: Recipient Fluid
<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> Încearcă - l singur »