Mavzu: Grid ning asosiy vazifalari
REJA
Grid tizimi haqida.
Grid qanday ishlaydi,
Eng keng tarqalgan misollar
Grid tizimi
Bootstrap 5 Grid tizimi
Bootstrap grid - bu mobil qurilmalar uchun birinchi tartiblarni yaratish uchun kuchli tizim. Bu juda ko'p imkoniyatlarga ega bo'lgan juda keng vosita. Quyida biz sizga asosiy bilimlarni taqdim etamiz. Bu eng ko'p ishlatiladigan misollarning soddalashtirilgan ko'rinishi.
Asosiy misol
Bootstrap grid tizimi tarkibni tartibga solish va tekislash uchun bir qator konteynerlar, qatorlar va ustunlardan foydalanadi. U flexbox bilan qurilgan va to'liq javob beradi. Quyida grid tizimining qanday ishlashiga misol va batafsil tushuntirish berilgan.
One of three columns
One of three columns
Yuqoridagi yuklash panjarasi misoli barcha qurilmalar va ko'rish oynalari bo'ylab oldindan belgilangan panjara sinflarimizdan foydalangan holda uchta teng kenglikdagi ustunlarni yaratadi. Ushbu ustunlar ota-ona bilan sahifaning markazida joylashgan .container.
Buni bosqichma-bosqich amalga oshirish:
Idish
Bootstrap sayt tarkibini o'rash va bizning tarmoq tizimimizni joylashtirish uchun o'z ichiga olgan elementni talab qiladi. Konteyner bo'lmasa, tarmoq to'g'ri ishlamaydi.
Qator
Qatorlar gorizontal ustunlar guruhlarini yaratadi. Shuning uchun, agar siz tartibni gorizontal ravishda ajratmoqchi bo'lsangiz, dan foydalaning .row.
Ustunlar
Bootstrap grid tizimi sahifa bo'ylab 12 tagacha ustunga ruxsat beradi.
Biz .col-md-*ustun yaratish uchun foydalanamiz, bu erda *1 dan 12 gacha ustunlar sonini belgilaydi.
mdustunlar kengligini o'zgartiradigan to'xtash nuqtasini belgilaydi.
md"ekran ≥768px" degan ma'noni anglatadi, shuning uchun men ustunlar ostidagi misol, kichikroq yoki teng 768px ekranlardagi kenglikning 100% gacha cho'ziladi.
Do'stlaringiz bilan baham: |
