BS ustma-ust/gorizontal
Bootstrap grid misoli: ustma-ustdan gorizontalga
Juda kichik qurilmalarda ustma-ust joylashgan, kattaroq qurilmalarda esa gorizontal holatga o‘tadigan oddiy grid tizimini yaratamiz.
Quyidagi misolda oddiy "ustma-ustdan gorizontalga" (stacked-to-horizontal) o‘tadigan ikki ustunli maket ko‘rsatilgan: u juda kichik ekranlardan tashqari barcha ekranlarda 50%/50% nisbatda bo‘linadi, juda kichik ekranlarda esa ustunlar avtomatik ravishda ustma-ust joylashadi (100%):
Misol: ustma-ustdan gorizontalga
<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>
O‘zingiz sinab ko‘ring »Maslahat: .col-sm-* klasslaridagi sonlar div nechta ustunni (12 tadan) egallashi kerakligini bildiradi. Demak, .col-sm-1 1 ta ustunni, .col-sm-4 4 ta ustunni, .col-sm-6 6 ta ustunni egallaydi va hokazo.
Eslatma: Ustunlar yig‘indisi har doim 12 ga teng bo‘lishiga ishonch hosil qiling!
Maslahat: .container klassini .container-fluid ga o‘zgartirib, istalgan qat’iy kenglikdagi maketni to‘liq kenglikdagi maketga aylantirishingiz mumkin:
Misol: fluid konteyner
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!