BS grid Small
Bootstrap grid misoli: kichik qurilmalar
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Klass prefiksi | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Ekran kengligi | <768px | >=768px | >=992px | >=1200px |
Faraz qilaylik, bizda ikki ustunli oddiy maket bor. Biz ustunlar kichik qurilmalarda 25%/75% nisbatda bo‘linishini xohlaymiz.
Maslahat: Kichik qurilmalar deb ekran kengligi 768 pikseldan 991 pikselgacha bo‘lgan qurilmalarga aytiladi.
Kichik qurilmalar uchun .col-sm-* klasslaridan foydalanamiz.
Ikkala ustunimizga quyidagi klasslarni qo‘shamiz:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Endi Bootstrap shunday "o‘ylaydi": "kichik o‘lchamda nomida -sm- bo‘lgan klasslarni qidir va ulardan foydalan".
Quyidagi misol kichik (shuningdek, o‘rta va katta) qurilmalarda 25%/75% nisbatda bo‘linishga olib keladi. Juda kichik qurilmalarda esa ustunlar avtomatik ravishda ustma-ust joylashadi (100%):
Misol
<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>
O‘zingiz sinab ko‘ring »Eslatma: Ustunlar yig‘indisi har doim 12 ga teng bo‘lishiga ishonch hosil qiling.
33.3%/66.6% nisbatda bo‘lish uchun .col-sm-4 va .col-sm-8 dan foydalanasiz:
Misol
<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>
O‘zingiz sinab ko‘ring »Keyingi bobda o‘rta qurilmalar uchun boshqacha bo‘linish nisbatini qanday qo‘shish ko‘rsatiladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!