Jumaboyev Abdulxamidning shaxsiy web sayti

Bootstrap Grid tizimi

Bootstrap-ning panjara tizimi sahifa bo’ylab 12 tagacha ustunlarga ruxsat beradi.

Agar siz barcha 12 ustunlardan alohida foydalanishni xohlamasangiz, ustunlarni birlashtirgan holda kengroq ustunlar yaratishingiz mumkin:

oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1oraliq 1
 oraliq 4 oraliq 4 oraliq 4
oraliq 4oraliq 8
oraliq 6oraliq 6
oraliq 12

Bootstrap-ning panjara tizimi sezgir bo’lib, ustunlar ekran o’lchamiga qarab avtomatik ravishda qayta tartibga solinadi.


Grid sinflari

Bootstrap grid tizimi to’rtta sinfga ega:

  • xs (telefonlar uchun – kengligi 768px dan kam ekranlar)
  • sm (planshetlar uchun – kengligi 768 pikselga teng yoki kattaroq ekranlar)
  • md (kichik noutbuklar uchun – kengligi 992 pikselga teng yoki undan kattaroq ekranlar)
  • lg (noutbuklar va ish stollari uchun – kengligi 1200px ga teng yoki kattaroq ekranlar)

Yuqoridagi sinflar yanada dinamik va moslashuvchan maketlarni yaratish uchun birlashtirilishi mumkin.


Bootstrap panjarasining asosiy tuzilishi

Quyida Bootstrap panjarasining asosiy tuzilishi keltirilgan:

<div class=»row»>
  <div class=»col-*-*»></div>
  <div class=»col-*-*»></div>
</div>
<div class=»row»>
  <div class=»col-*-*»></div>
  <div class=»col-*-*»></div>
  <div class=»col-*-*»></div>
</div>
<div class=»row»>
  …
</div>

Birinchidan; qator yaratish ( <div class=»row»>). Keyin kerakli sonli ustunlarni qo’shing (tegishli .col-*-*sinflarga ega teglar ). Raqamlar .col-*-*har doim har bir satr uchun 12 tagacha qo’shilishi kerakligini unutmang .

Quyida biz asosiy Bootstrap panjara maketlarining ba’zi bir misollarini to’pladik.

Uch teng ustun

Quyidagi misolda uchta kenglikdagi ustunlarni qanday qilib planshetlardan boshlab va katta ish stoliga masshtablash ko’rsatilgan. 768 pikseldan kam bo’lgan mobil telefonlarda yoki ekranlarda ustunlar avtomatik ravishda to’planadi :

Misol

<div class=»row»>
  <div class=»col-sm-4″>.col-sm-4</div>
  <div class=»col-sm-4″>.col-sm-4</div>
  <div class=»col-sm-4″>.col-sm-4</div>
</div>


Ikki tengsiz ustun

.col-sm-4.col-sm-8

 

Quyidagi misolda planshetlardan boshlanadigan va katta ish stollariga masshtabli ikkita kenglikdagi ikkita ustunni qanday olish mumkinligi ko’rsatilgan:

Misol

<div class=»row»>
  <div class=»col-sm-4″>.col-sm-4</div>
  <div class=»col-sm-8″>.col-sm-8</div>
</div>

Maslahat: Bootstrap tarmoqlari haqida ko’proq ma’lumotni ushbu o’quv qo’llanmaning keyinroq bilib olasiz.