CSS yordamchi klasslar
Matn
Quyidagi klasslar yordamida matn ranglari orqali ma’no bering. Havolalar sichqoncha ustiga olib borilganda to‘qroq tusga kiradi:
| Klass | Tavsif | Misol |
|---|---|---|
| .text-muted | "text-muted" klassi bilan bezatilgan matn | Sinab ko‘ring |
| .text-primary | "text-primary" klassi bilan bezatilgan matn | Sinab ko‘ring |
| .text-success | "text-success" klassi bilan bezatilgan matn | Sinab ko‘ring |
| .text-info | "text-info" klassi bilan bezatilgan matn | Sinab ko‘ring |
| .text-warning | "text-warning" klassi bilan bezatilgan matn | Sinab ko‘ring |
| .text-danger | "text-danger" klassi bilan bezatilgan matn | Sinab ko‘ring |
Fon
Quyidagi klasslar yordamida fon ranglari orqali ma’no bering. Havolalar matn klasslaridagi kabi sichqoncha ustiga olib borilganda to‘qroq tusga kiradi:
| Klass | Tavsif | Misol |
|---|---|---|
| .bg-primary | Jadval katagi "bg-primary" klassi bilan bezatilgan | Sinab ko‘ring |
| .bg-success | Jadval katagi "bg-success" klassi bilan bezatilgan | Sinab ko‘ring |
| .bg-info | Jadval katagi "bg-info" klassi bilan bezatilgan | Sinab ko‘ring |
| .bg-warning | Jadval katagi "bg-warning" klassi bilan bezatilgan | Sinab ko‘ring |
| .bg-danger | Jadval katagi "bg-danger" klassi bilan bezatilgan | Sinab ko‘ring |
Boshqa
| Klass | Tavsif | Misol |
|---|---|---|
| .pull-left | Elementni chapga joylashtiradi (float) | Sinab ko‘ring |
| .pull-right | Elementni o‘ngga joylashtiradi (float) | Sinab ko‘ring |
| .center-block | Elementga margin-right:auto va margin-left:auto bilan birga display:block qiymatini beradi | Sinab ko‘ring |
| .clearfix | Float’larni tozalaydi | Sinab ko‘ring |
| .show | Elementni majburan ko‘rsatadi (display:block) | Sinab ko‘ring |
| .hidden | Elementni majburan yashiradi (display:none) | Sinab ko‘ring |
| .invisible | Elementni majburan ko‘rinmas qiladi (visibility:hidden). Element ko‘rinmas bo‘lsa ham, sahifada joy egallaydi | Sinab ko‘ring |
| .sr-only | Elementni ekran o‘quvchi dasturlardan tashqari barcha qurilmalarda yashiradi | Sinab ko‘ring |
| .sr-only-focusable | Element fokus olganda (masalan, faqat klaviaturadan foydalanuvchi tomonidan) uni yana ko‘rsatish uchun .sr-only bilan birga qo‘llang | Sinab ko‘ring |
| .text-hide | Element matn kontentini fon rasmi bilan almashtirishga yordam beradi | Sinab ko‘ring |
| .close | Yopish belgisini bildiradi | Sinab ko‘ring |
| .caret | Ochiluvchi menyu funksiyasini bildiradi (yuqoriga ochiluvchi (dropup) menyularda avtomatik ravishda teskari yo‘nalishga o‘giriladi) | Sinab ko‘ring |
Moslashuvchan yordamchi klasslar
Bu klasslar media so‘rovlar (media queries) orqali qurilmaga qarab kontentni ko‘rsatish va/yoki yashirish uchun ishlatiladi.
Kontentni viewport’ning turli chegara nuqtalarida (breakpoint) ko‘rsatish/yashirish uchun mavjud klasslardan birini yoki ularning kombinatsiyasini ishlating:
| Klasslar | Juda kichik qurilmalar Telefonlar (<768px) | Kichik qurilmalar Planshetlar (≥768px) | O‘rta qurilmalar Kompyuterlar (≥992px) | Katta qurilmalar Kompyuterlar (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Ko‘rinadi | Yashirin | Yashirin | Yashirin |
| .visible-sm-* | Yashirin | Ko‘rinadi | Yashirin | Yashirin |
| .visible-md-* | Yashirin | Yashirin | Ko‘rinadi | Yashirin |
| .visible-lg-* | Yashirin | Yashirin | Yashirin | Ko‘rinadi |
| .hidden-xs | Yashirin | Ko‘rinadi | Ko‘rinadi | Ko‘rinadi |
| .hidden-sm | Ko‘rinadi | Yashirin | Ko‘rinadi | Ko‘rinadi |
| .hidden-md | Ko‘rinadi | Ko‘rinadi | Yashirin | Ko‘rinadi |
| .hidden-lg | Ko‘rinadi | Ko‘rinadi | Ko‘rinadi | Yashirin |
Yashirin
Ekran o‘lchamiga qarab elementlarni yashiring:
Misol
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
Natija:
Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
v3.2.0 versiyasidan boshlab .visible-*-* klasslari uch xil variantda keladi — har bir CSS display xususiyati qiymati uchun bittadan:
| Klasslar guruhi | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Masalan, kichik (sm) ekranlar uchun mavjud .visible-*-* klasslari: .visible-sm-block, .visible-sm-inline va .visible-sm-inline-block.
.visible-xs, .visible-sm, .visible-md va .visible-lg klasslari v3.2.0 versiyasidan boshlab eskirgan.
Misol
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
Natija:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!