Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS5 yordamchi klasslar

ULASHISH

Yordamchi klasslar (utilities / helper classes)

Bootstrap 5’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


<span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-end-0"></span> <span class="border border-bottom-0"></span> <span class="border border-start-0"></span> <br> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span>
O‘zingiz sinab ko‘ring »

Chegara qalinligi

Chegara qalinligini o‘zgartirish uchun .border-1 dan .border-5 gacha bo‘lgan klasslardan foydalaning:

Misol

<span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span>
O‘zingiz sinab ko‘ring »

Chegara rangi

Istalgan kontekstual chegara rangi klassi yordamida chegaraga rang bering:

Misol

<span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span>
O‘zingiz sinab ko‘ring »

Chegara radiusi

rounded klasslari yordamida elementga yumaloq burchaklar qo‘shing:

Misol


<span class="rounded"></span> <span class="rounded-top"></span> <span class="rounded-end"></span> <span class="rounded-bottom"></span> <span class="rounded-start"></span> <span class="rounded-circle"></span> <span class="rounded-pill" style="width:130px"></span> <span class="rounded-0"></span> <span class="rounded-1"></span> <span class="rounded-2"></span> <span class="rounded-3"></span> <span class="rounded-4"></span> <span class="rounded-5"></span>
O‘zingiz sinab ko‘ring »

Float va clearfix

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

Misol

Float left Float right
<div class="clearfix">   <span class="float-start">Float left</span>   <span class="float-end">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-*-start|end — bu yerda * o‘rnida sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) yoki xxl (>=1400px) 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 right on XXL screens or wider

Float none
<div class="float-sm-end">Float right on small screens or wider</div><br> <div class="float-md-end">Float right on medium screens or wider</div><br> <div class="float-lg-end">Float right on large screens or wider</div><br> <div class="float-xl-end">Float right on extra large screens or wider</div><br> <div class="float-xxl-end">Float right on XXL 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
<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, .w-auto va .mw-100) yordamida belgilang:

Misol

Width 25%
Width 50%
Width 75%
Width 100%
Auto Width
Max Width 100%
<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="w-auto bg-warning">Auto Width</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, .h-auto va .mh-100) yordamida belgilang:

Misol

Height 25%
Height 50%
Height 75%
Height 100%
Auto Height
Max Height 100%
<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="h-auto bg-warning">Auto Height</div>   <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div> </div>
O‘zingiz sinab ko‘ring »

Oraliqlar (spacing)

Bootstrap 5’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), xl (>=1200px) yoki xxl (>=1400px):

Klasslar quyidagi formatda ishlatiladi: xs uchun {property}{sides}-{size}, sm, md, lg, xl va xxl 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
  • s — margin-left yoki padding-left ni belgilaydi
  • e — 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
  • 2 — margin yoki padding ni .5rem ga o‘rnatadi
  • 3 — margin yoki padding ni 1rem ga o‘rnatadi
  • 4 — margin yoki padding ni 1.5rem ga o‘rnatadi
  • 5 — margin yoki padding ni 3rem ga o‘rnatadi
  • auto — margin ni auto qiymatiga o‘rnatadi

Misol

I only have a top padding (1.5rem)
I have a padding on all sides (3rem)
I have a margin on all sides (3rem) and a bottom padding (3rem)
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div> <div class="p-5 bg-success">I have a padding on all sides (3rem)</div> <div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</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
.ms-# / ms-*-# chapdan margin Sinab ko‘ring
.me-# / me-*-# 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
.ps-# / ps-*-# chapdan padding Sinab ko‘ring
.pe-# / pe-*-# 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

rem va turli o‘lchov birliklari haqida CSS o‘lchov birliklari ma’lumotnomamizda batafsil o‘qishingiz mumkin.

Soyalar

Elementga soya qo‘shish uchun shadow- klasslaridan foydalaning:

Misol

No shadow
Small shadow
Default shadow
Large shadow
<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
<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 »

Tomonlar nisbati (aspect ratio)

Ota element kengligiga asoslangan moslashuvchan video yoki slayd-shoular yarating.

Ota elementga .ratio klassini o‘zingiz tanlagan tomonlar nisbati .ratio-* bilan birga qo‘shing va uning ichiga joylashtiriladigan elementni (video yoki iframe) qo‘shing:

Misol

<!-- Aspect ratio 1:1 --> <div class="ratio ratio-1x1">   <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <!-- Aspect ratio 4:3 --> <div class="ratio ratio-4x3">   <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <!-- Aspect ratio 16:9 --> <div class="ratio ratio-16x9">   <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <!-- Aspect ratio 21:9 --> <div class="ratio ratio-21x9">   <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></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
<div class="visible">I am visible</div> <div class="invisible">I am invisible</div>
O‘zingiz sinab ko‘ring »

Yopish belgisi

Yopish belgisini bezash uchun .btn-close klassidan foydalaning. U ko‘pincha ogohlantirishlar va modal oynalarda ishlatiladi.

Misol

<button type="button" class="btn-close"></button>
O‘zingiz sinab ko‘ring »

Ekran o‘quvchi dasturlar (screen reader)

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

Misol

<span class="visually-hidden">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:

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.

Misol

O‘zingiz sinab ko‘ring »

Yuqoridagi .bg-color klasslari matn bilan yaxshi ishlamaydi yoki hech bo‘lmaganda har bir fon uchun to‘g‘ri matn rangini olish maqsadida mos .text-color klassini ko‘rsatishingizga to‘g‘ri keladi.

Biroq .text-bg-color klasslaridan foydalanishingiz mumkin — bunda Bootstrap har bir fon rangi uchun mos matn rangini avtomatik tanlaydi:

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 »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish