Bootstrap Grid Exemplu: Aparate mici
Să presupunem că avem un aspect simplu cu două coloane. Vrem coloanele care urmează să fie împărțită la 25%/75% pentru dispozitivele mici.
Sfat: Dispozitivele mici sunt definite ca având o lățime de ecran de la 768 pixeli la 991 pixeli.
Pentru dispozitivele mici , vom folosi .col-sm-* clase.
Vom adăuga următoarele clase la două coloane noastre:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Acum Bootstrap va spune „la dimensiunea de mici, uita - te pentru clasele cu -sm- în ele și de a folosi acele“.
Următorul exemplu va avea ca rezultat o 25%/75% divizat pe dispozitive mici (și mijlocii și mari). Pe dispozitive suplimentare mici, acesta va stivui automat (100%) :
Exemplu
<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> Încearcă - l singur » Notă: Asigurați - vă că suma se adaugă întotdeauna la 12.
Pentru o / 66,6% divizat 33,3%, v - ar folosi .col-sm-4 și .col-sm-8 :
Exemplu
<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> Încearcă - l singur » Următorul capitol arată cum să adăugați un procent divizat diferit pentru dispozitive medii.