BS4 yordamchi klasslar

Bootstrap 4 yordamchi klasslari

Bootstrap 4’da hech qanday CSS kodi yozmasdan elementlarni tezda bezash uchun ko‘plab yordamchi klasslar mavjud.

Chegaralar

Elementga chegara qo‘shish yoki undan chegarani olib tashlash uchun border klasslaridan foydalaning:

Misol

O‘zingiz sinab ko‘ring »

Chegara rangi

Istalgan kontekstual chegara rangi klassi yordamida chegaraga rang bering:

Misol

O‘zingiz sinab ko‘ring »

Chegara radiusi

rounded klasslari yordamida elementga yumaloq burchaklar qo‘shing:

Misol

O‘zingiz sinab ko‘ring »

Float va clearfix

Elementni .float-right klassi yordamida o‘ngga yoki .float-left yordamida chapga joylashtiring (float), float’larni esa .clearfix klassi yordamida tozalang (clear):

Misol

Float left Float right

Misol

<div class="clearfix"> <span class="float-left">Float left</span> <span class="float-right">Float right</span> </div>

O‘zingiz sinab ko‘ring »

Moslashuvchan float’lar

Moslashuvchan float klasslari yordamida elementni ekran kengligiga qarab chapga yoki o‘ngga joylashtiring (.float-*-left|right — bu yerda * o‘rnida sm (>=576px), md (>=768px), lg (>=992px) yoki xl (>=1200px) bo‘ladi):

Misol

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none

Misol

<div class="float-sm-right">Float right on small screens or wider</div><br> <div class="float-md-right">Float right on medium screens or wider</div><br> <div class="float-lg-right">Float right on large screens or wider</div><br> <div class="float-xl-right">Float right on extra large screens or wider</div><br> <div class="float-none">Float none</div>

O‘zingiz sinab ko‘ring »

Markazga tekislash

Elementni .mx-auto klassi yordamida markazga joylashtiring (margin-left va margin-right: auto qo‘shadi):

Misol

Centered

Misol

<div class="mx-auto bg-warning" style="width:150px">Centered</div>

O‘zingiz sinab ko‘ring »

Kenglik

Element kengligini w-* klasslari (.w-25, .w-50, .w-75, .w-100, .mw-100) yordamida belgilang:

Misol

Width 25%

Width 50%

Width 75%

Width 100%

Max Width 100%

Misol

<div class="w-25 bg-warning">Width 25%</div> <div class="w-50 bg-warning">Width 50%</div> <div class="w-75 bg-warning">Width 75%</div> <div class="w-100 bg-warning">Width 100%</div> <div class="mw-100 bg-warning">Max Width 100%</div>

O‘zingiz sinab ko‘ring »

Balandlik

Element balandligini h-* klasslari (.h-25, .h-50, .h-75, .h-100, .mh-100) yordamida belgilang:

Misol

Height 25%

Height 50%

Height 75%

Height 100%

Max Height 100%

Misol

<div style="height:200px;background-color:#ddd"> <div class="h-25 bg-warning">Height 25%</div> <div class="h-50 bg-warning">Height 50%</div> <div class="h-75 bg-warning">Height 75%</div> <div class="h-100 bg-warning">Height 100%</div> <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div> </div>

O‘zingiz sinab ko‘ring »

Oraliqlar (spacing)

Bootstrap 4’da moslashuvchan tashqi (margin) va ichki (padding) chekinishlar uchun keng ko‘lamli yordamchi klasslar mavjud. Ular barcha breakpoint’lar uchun ishlaydi: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) yoki xl (>=1200px):

Klasslar quyidagi formatda ishlatiladi: xs uchun {property}{sides}-{size}, sm, md, lg va xl uchun esa {property}{sides}-{breakpoint}-{size}.

Bu yerda property quyidagilardan biri:

m — margin ni belgilaydi
p — padding ni belgilaydi

Bu yerda sides quyidagilardan biri:

t — margin-top yoki padding-top ni belgilaydi
b — margin-bottom yoki padding-bottom ni belgilaydi
l — margin-left yoki padding-left ni belgilaydi
r — margin-right yoki padding-right ni belgilaydi
x — padding-left va padding-right ni yoki margin-left va margin-right ni birgalikda belgilaydi
y — padding-top va padding-bottom ni yoki margin-top va margin-bottom ni birgalikda belgilaydi
blank (bo‘sh) — elementning barcha 4 tomoniga margin yoki padding o‘rnatadi

Bu yerda size quyidagilardan biri:

0 — margin yoki padding ni 0 ga o‘rnatadi
1 — margin yoki padding ni .25rem ga o‘rnatadi (font-size 16px bo‘lsa, 4px)
2 — margin yoki padding ni .5rem ga o‘rnatadi (font-size 16px bo‘lsa, 8px)
3 — margin yoki padding ni 1rem ga o‘rnatadi (font-size 16px bo‘lsa, 16px)
4 — margin yoki padding ni 1.5rem ga o‘rnatadi (font-size 16px bo‘lsa, 24px)
5 — margin yoki padding ni 3rem ga o‘rnatadi (font-size 16px bo‘lsa, 48px)
auto — margin ni auto qiymatiga o‘rnatadi

Eslatma: size oldiga "n" qo‘shish orqali tashqi chekinishlarni (margin) manfiy qilish ham mumkin:

n1 — margin ni -.25rem ga o‘rnatadi (font-size 16px bo‘lsa, -4px)
n2 — margin ni -.5rem ga o‘rnatadi (font-size 16px bo‘lsa, -8px)
n3 — margin ni -1rem ga o‘rnatadi (font-size 16px bo‘lsa, -16px)
n4 — margin ni -1.5rem ga o‘rnatadi (font-size 16px bo‘lsa, -24px)
n5 — margin ni -3rem ga o‘rnatadi (font-size 16px bo‘lsa, -48px)

Misol

I only have a top padding (1.5rem = 24px)

I have a padding on all sides (3rem = 48px)

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)

Misol

<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div> <div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div> <div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

O‘zingiz sinab ko‘ring »

Oraliqlarga oid qo‘shimcha misollar

`.m-# / m-*-#`	barcha tomonlarda margin	Sinab ko‘ring
`.mt-# / mt-*-#`	yuqoridan margin	Sinab ko‘ring
`.mb-# / mb-*-#`	pastdan margin	Sinab ko‘ring
`.ml-# / ml-*-#`	chapdan margin	Sinab ko‘ring
`.mr-# / mr-*-#`	o‘ngdan margin	Sinab ko‘ring
`.mx-# / mx-*-#`	chap va o‘ngdan margin	Sinab ko‘ring
`.my-# / my-*-#`	yuqori va pastdan margin	Sinab ko‘ring
`.p-# / p-*-#`	barcha tomonlarda padding	Sinab ko‘ring
`.pt-# / pt-*-#`	yuqoridan padding	Sinab ko‘ring
`.pb-# / pb-*-#`	pastdan padding	Sinab ko‘ring
`.pl-# / pl-*-#`	chapdan padding	Sinab ko‘ring
`.pr-# / pr-*-#`	o‘ngdan padding	Sinab ko‘ring
`.py-# / py-*-#`	yuqori va pastdan padding	Sinab ko‘ring
`.px-# / px-*-#`	chap va o‘ngdan padding	Sinab ko‘ring

Soyalar

Elementga soya qo‘shish uchun shadow- klasslaridan foydalaning:

Misol

No shadow

Small shadow

Default shadow

Large shadow

Misol

<div class="shadow-none p-4 mb-4 bg-light">No shadow</div> <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div> <div class="shadow p-4 mb-4 bg-white">Default shadow</div> <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

O‘zingiz sinab ko‘ring »

Vertikal tekislash

Elementlarning tekislanishini o‘zgartirish uchun align- klasslaridan foydalaning (faqat inline, inline-block, inline-table va jadval katagi elementlarida ishlaydi):

Misol

baseline top middle bottom text-top text-bottom

Misol

<span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span>

O‘zingiz sinab ko‘ring »

Moslashuvchan joylashtirmalar (embed)

Ota element kengligiga asoslangan moslashuvchan video yoki slayd-shou joylashtirmalarini (embed) yarating.

.embed-responsive va o‘zingiz tanlagan tomonlar nisbati klassiga ega ota element ichidagi istalgan joylashtiriladigan elementga (masalan, <iframe> yoki <video>) .embed-responsive-item ni qo‘shing:

Misol

<div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div>

O‘zingiz sinab ko‘ring »

Ko‘rinuvchanlik

Elementlarning ko‘rinuvchanligini boshqarish uchun .visible yoki .invisible klasslaridan foydalaning. Eslatma: Bu klasslar CSS display qiymatini o‘zgartirmaydi. Ular faqat visibility:visible yoki visibility:hidden ni qo‘shadi:

Misol

I am visible

I am invisible

Misol

<div class="visible">I am visible</div> <div class="invisible">I am invisible</div>

O‘zingiz sinab ko‘ring »

Joylashuv (position)

Istalgan elementni sahifaning yuqori qismiga qotirish uchun .fixed-top klassidan foydalaning:

Misol

O‘zingiz sinab ko‘ring »

Istalgan elementni sahifaning pastki qismiga qotirish uchun .fixed-bottom klassidan foydalaning:

Misol

O‘zingiz sinab ko‘ring »

Sahifa aylantirilib, elementdan o‘tib ketilganda u sahifaning yuqori qismida qotib qolishi uchun .sticky-top klassidan foydalaning. Eslatma: Bu klass IE11 va undan oldingi versiyalarda ishlamaydi (ular uni position:relative sifatida qabul qiladi).

Misol

O‘zingiz sinab ko‘ring »

Yopish belgisi

Yopish belgisini bezash uchun .close klassidan foydalaning. U ko‘pincha ogohlantirishlar va modal oynalarda ishlatiladi. E’tibor bering, belgining o‘zini hosil qilish uchun × simvolidan foydalanamiz (u "x" harfiga qaraganda chiroyliroq ko‘rinadi). Shuningdek, u standart holatda o‘ngga joylashadi (float):

Misol

O‘zingiz sinab ko‘ring »

Ekran o‘quvchi dasturlar (screen reader)

Elementni ekran o‘quvchi dasturlardan tashqari barcha qurilmalarda yashirish uchun .sr-only klassidan foydalaning:

Misol

<span class="sr-only">I will be hidden on all screens except for screen readers.</span>

O‘zingiz sinab ko‘ring »

Ranglar

Ranglar bobida tasvirlanganidek, quyida barcha matn va fon rangi klasslarining ro‘yxati keltirilgan:

Matn ranglari uchun klasslar: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (standart body rangi, ko‘pincha qora) va .text-light:

Misol

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

O‘zingiz sinab ko‘ring »

Kontekstual matn klasslarini havolalarda ham ishlatish mumkin, bunda sichqoncha ustiga olib borilganda (hover) havola rangi to‘qroq tusga kiradi:

Misol

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.

O‘zingiz sinab ko‘ring »

Shuningdek, .text-black-50 yoki .text-white-50 klasslari yordamida qora yoki oq matnga 50% shaffoflik (opacity) qo‘shishingiz mumkin:

Misol

Black text with 50% opacity on white background

White text with 50% opacity on black background

O‘zingiz sinab ko‘ring »

Fon ranglari

Fon ranglari uchun klasslar: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark va .bg-light.

E’tibor bering, fon ranglari matn rangini belgilamaydi, shuning uchun ba’zi hollarda ularni .text-* klassi bilan birga ishlatishingiz kerak bo‘ladi.

Misol

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

O‘zingiz sinab ko‘ring »

Tipografiya/matn klasslari

Tipografiya bobida tasvirlanganidek, quyida barcha tipografiya/matn klasslarining ro‘yxati keltirilgan:

Klass	Tavsif	Misol
`.display-*`	Display sarlavhalar oddiy sarlavhalardan ko‘proq ajralib turishi uchun ishlatiladi (shrift o‘lchami kattaroq, shrift qalinligi esa yengilroq) va tanlash uchun to‘rtta klass mavjud: `.display-1`, `.display-2`, `.display-3`, `.display-4`	Sinab ko‘ring
`.font-weight-bold`	Qalin matn	Sinab ko‘ring
`.font-weight-bolder`	Yanada qalinroq matn	Sinab ko‘ring
`.font-weight-normal`	Oddiy (normal) matn	Sinab ko‘ring
`.font-weight-light`	Ingichka (light) matn	Sinab ko‘ring
`.font-weight-lighter`	Yanada ingichkaroq matn	Sinab ko‘ring
`.font-italic`	Kursiv matn	Sinab ko‘ring
`.lead`	Paragrafni ajratib ko‘rsatadi	Sinab ko‘ring
`.small`	Matnni kichikroq qiladi (ota element o‘lchamining 85% iga teng)	Sinab ko‘ring
`.text-break`	Uzun matn maketni buzishining oldini oladi	Sinab ko‘ring
`.text-center`	Matnni markazga tekislaydi	Sinab ko‘ring
`.text-decoration-none`	Havoladan tagiga chizishni (underline) olib tashlaydi	Sinab ko‘ring
`.text-left`	Matnni chapga tekislaydi	Sinab ko‘ring
`.text-justify`	Matnni ikki chet bo‘yicha (justify) tekislaydi	Sinab ko‘ring
`.text-monospace`	Monospace (belgilari bir xil kenglikdagi) shriftli matn	Sinab ko‘ring
`.text-nowrap`	Matnni keyingi qatorga o‘tkazmaydi (nowrap)	Sinab ko‘ring
`.text-lowercase`	Matnni kichik harflarga o‘tkazadi	Sinab ko‘ring
`.text-reset`	Matn yoki havola rangini tiklaydi (rangni ota elementdan meros qilib oladi)	Sinab ko‘ring
`.text-right`	Matnni o‘ngga tekislaydi	Sinab ko‘ring
`.text-uppercase`	Matnni katta harflarga o‘tkazadi	Sinab ko‘ring
`.text-capitalize`	Har bir so‘zni bosh harf bilan boshlaydi	Sinab ko‘ring
`.initialism`	`<abbr>` elementi ichidagi matnni biroz kichikroq shrift o‘lchamida ko‘rsatadi	Sinab ko‘ring
`.list-unstyled`	Ro‘yxat elementlaridan standart list-style va chap tashqi chekinishni (margin) olib tashlaydi (`<ul>` va `<ol>` ning ikkalasida ham ishlaydi). Bu klass faqat bevosita ichki (farzand) ro‘yxat elementlariga ta’sir qiladi (ichma-ich joylashgan ro‘yxatlardan ham standart list-style’ni olib tashlash uchun bu klassni ichki ro‘yxatlarning har biriga ham qo‘llang)	Sinab ko‘ring
`.list-inline`	Barcha ro‘yxat elementlarini bitta qatorga joylashtiradi (har bir <li> elementida `.list-inline-item` bilan birga ishlatiladi)	Sinab ko‘ring
`.pre-scrollable`	`<pre>` elementini aylantiriladigan (scrollable) qiladi	Sinab ko‘ring

Blok elementlar

Elementni blok elementga aylantirish uchun .d-block klassini qo‘shing. Element muayyan ekran kengligida QACHON blok element bo‘lishini boshqarish uchun istalgan d-*-block klassidan foydalaning:

Misol

d-block d-sm-block d-md-block d-lg-block d-xl-block

Misol

<span class="d-block bg-success">d-block</span> <span class="d-sm-block bg-success">d-sm-block</span> <span class="d-md-block bg-success">d-md-block</span> <span class="d-lg-block bg-success">d-lg-block</span> <span class="d-xl-block bg-success">d-xl-block</span>

O‘zingiz sinab ko‘ring »

Boshqa display klasslari

Boshqa display klasslari ham mavjud:

Klass	Tavsif	Misol
`.d-none`	Elementni yashiradi	Sinab ko‘ring
`.d-*-none`	Elementni muayyan ekran o‘lchamida yashiradi	Sinab ko‘ring
`.d-inline`	Elementni inline qiladi	Sinab ko‘ring
`.d-*-inline`	Elementni muayyan ekran o‘lchamida inline qiladi	Sinab ko‘ring
`.d-inline-block`	Elementni inline-block qiladi	Sinab ko‘ring
`.d-*-inline-block`	Elementni muayyan ekran o‘lchamida inline-block qiladi	Sinab ko‘ring
`.d-table`	Elementni jadval (table) sifatida ko‘rsatadi	Sinab ko‘ring
`.d-*-table`	Elementni muayyan ekran o‘lchamida jadval (table) sifatida ko‘rsatadi	Sinab ko‘ring
`.d-table-cell`	Elementni jadval katagi (table cell) sifatida ko‘rsatadi	Sinab ko‘ring
`.d-*-table-cell`	Elementni muayyan ekran o‘lchamida jadval katagi (table cell) sifatida ko‘rsatadi	Sinab ko‘ring
`.d-table-row`	Elementni jadval qatori (table row) sifatida ko‘rsatadi	Sinab ko‘ring
`.d-*-table-row`	Elementni muayyan ekran o‘lchamida jadval qatori (table row) sifatida ko‘rsatadi	Sinab ko‘ring
`.d-flex`	Flexbox konteyner yaratadi va uning bevosita farzand elementlarini flex elementlarga aylantiradi	Sinab ko‘ring
`.d-*-flex`	Muayyan ekran o‘lchamida flexbox konteyner yaratadi	Sinab ko‘ring
`.d-inline-flex`	Inline flexbox konteyner yaratadi	Sinab ko‘ring
`.d-*-inline-flex`	Muayyan ekran o‘lchamida inline flexbox konteyner yaratadi	Sinab ko‘ring

Flex

Maketni flexbox yordamida boshqarish uchun .flex-* klasslaridan foydalaning.

Bootstrap 4 Flex haqida keyingi bobimizda batafsil o‘qing.

Misol

Horizontal:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Vertical:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish