BS5 konteynerlar
Bootstrap 5 konteynerlari
Oldingi bobdan bilib oldingizki, Bootstrap sayt kontentini o‘rab turuvchi elementni talab qiladi.
Konteynerlar ichidagi kontentga ichki chekinish (padding) berish uchun ishlatiladi va ikkita konteyner klassi mavjud:
.containerklassi moslashuvchan, qat’iy kenglikdagi konteynerni taqdim etadi.container-fluidklassi viewport’ning butun kengligini egallaydigan to‘liq kenglikdagi konteynerni taqdim etadi
Qat’iy kenglikdagi konteyner
Moslashuvchan, qat’iy kenglikdagi konteyner yaratish uchun .container klassidan foydalaning.
E’tibor bering, uning kengligi (max-width) turli ekran o‘lchamlarida o‘zgaradi:
| Juda kichik <576px |
Kichik ≥576px |
O‘rta ≥768px |
Katta ≥992px |
Juda katta ≥1200px |
XXL ≥1400px |
|
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
Quyidagi misolni oching va konteyner kengligi turli breakpoint’larda (chegara nuqtalarida) o‘zgarishini ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring:
Misol
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
O‘zingiz sinab ko‘ring »
XXL breakpoint (≥1400px) Bootstrap 5’da yangi, Bootstrap 4’dagi eng katta breakpoint esa Extra large (≥1200px) edi.
Fluid (to‘liq kenglikdagi) konteyner
Har doim ekranning butun kengligini egallaydigan to‘liq kenglikdagi konteyner yaratish uchun .container-fluid klassidan foydalaning (width har doim 100% ga teng):
Misol
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
O‘zingiz sinab ko‘ring »
Konteynerning ichki chekinishi (padding)
Standart holatda konteynerlarning chap va o‘ng tomonida ichki chekinish (padding) bo‘ladi, yuqori va pastki tomonida esa bo‘lmaydi. Shu sababli ularni yanada chiroyli ko‘rsatish uchun ko‘pincha qo‘shimcha ichki va tashqi chekinishlar (padding va margin) kabi oraliq (spacing) yordamchi klasslaridan foydalanamiz. Masalan,
.pt-5 "katta yuqori ichki chekinish qo‘shish" degan ma’noni bildiradi:
Konteyner chegarasi va rangi
Chegaralar va ranglar kabi boshqa yordamchi klasslar ham ko‘pincha konteynerlar bilan birga ishlatiladi:
Misol
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
O‘zingiz sinab ko‘ring »
Ranglar va chegara yordamchi klasslari haqida keyingi boblarda ancha ko‘proq bilib olasiz.
Moslashuvchan konteynerlar
Konteyner qachondan boshlab moslashuvchan bo‘lishi kerakligini belgilash uchun .container-sm|md|lg|xl klasslaridan ham foydalanishingiz mumkin.
Konteynerning max-width qiymati turli ekran o‘lchamlari/viewport’larda o‘zgaradi:
| Klass | Juda kichik <576px |
Kichik ≥576px |
O‘rta ≥768px |
Katta ≥992px |
Juda katta ≥1200px |
XXL ≥1400px |
|---|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
Misol
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
O‘zingiz sinab ko‘ring »
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!