BS4 konteynerlar
Konteynerlar
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 |
|
|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px |
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 »
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 15px 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-3 "16px yuqori ichki chekinish qo‘shish" degan ma’noni bildiradi:
Oraliq (spacing) yordamchi klasslari haqida BS4 yordamchi klasslar bobida ancha ko‘proq bilib olasiz.
Konteyner chegarasi va rangi
Chegaralar va ranglar kabi boshqa yordamchi klasslar ham ko‘pincha konteynerlar bilan birga ishlatiladi:
Misol
My First Bootstrap Page
This container has a border and some extra padding and margins.
My First Bootstrap Page
This container has a dark background color and a white text, and some extra padding and margins.
My First Bootstrap Page
This container has a blue background color and a white text, and some extra padding and margins.
<div class="container p-3 my-3 border"></div>
<div class="container p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary text-white"></div>
O‘zingiz sinab ko‘ring »
Ranglar va chegara yordamchi klasslari haqida BS4 ranglar va BS4 yordamchi klasslar boblarida ancha ko‘proq bilib olasiz.
Moslashuvchan konteynerlar
Moslashuvchan konteynerlar yaratish 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 |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
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>
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!