CSS barcha klasslar
Barcha Bootstrap klasslarining to‘liq ro‘yxati
Barcha Bootstrap klasslarining tavsif va misollar bilan to‘liq ro‘yxati:
| Klass | Tavsif | Misol | Kategoriya |
|---|---|---|---|
.active |
Jadval qatoriga (<tr> yoki jadval katagiga (<td>) kulrang fon rangini qo‘shadi (hover holatida ham xuddi shu rang ishlatiladi) |
Sinab ko‘ring | Jadvallar |
.active |
Standart navigatsiya panelidagi faol havolaga kulrang fon rangini qo‘shadi. Teskari ranglardagi (inverted) navigatsiya paneli ichidagi joriy havolaga qora fon va oq rang beradi. | Sinab ko‘ring | Navigatsiya paneli |
.active |
Ro‘yxat guruhidagi faol ro‘yxat elementiga ko‘k fon rangini qo‘shadi | Sinab ko‘ring | Ro‘yxat guruhlari |
.active |
"Bosilgan" ko‘rinishni hosil qilish uchun tugmaga ko‘k fon rangini qo‘shadi | Sinab ko‘ring | Tugmalar |
.active |
Yo‘l-yo‘l progress barni animatsiyali qiladi | Sinab ko‘ring | Jarayon indikatorlari |
.active |
Ochiluvchi menyudagi faol menyu elementiga ko‘k fon rangini qo‘shadi | Sinab ko‘ring | Ochiluvchi menyular |
.active |
Faol sahifalash havolasiga ko‘k fon rangini qo‘shadi (joriy sahifani ajratib ko‘rsatish uchun) | Sinab ko‘ring | Sahifalash |
.affix |
Affix plagini elementni sahifadagi ma’lum bir joyga qotirib (qulflab/yopishtirib) qo‘yish imkonini beradi. U position:fixed ni yoqib-o‘chiradi |
Sinab ko‘ring | Affix |
.alert |
Ogohlantirish xabari blokini yaratadi | Sinab ko‘ring | Ogohlantirishlar |
.alert-danger |
Qizil ogohlantirish bloki. Xavfli yoki salbiy oqibatga olib kelishi mumkin bo‘lgan harakatni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-dismissible |
Bu klass .close klassi bilan birgalikda ogohlantirishni yopish uchun ishlatiladi |
Sinab ko‘ring | Ogohlantirishlar |
.alert-info |
Och ko‘k ogohlantirish bloki. Qandaydir ma’lumotni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-link |
Ogohlantirishlar ichidagi havolalarga mos rang berish uchun ishlatiladi | Sinab ko‘ring | Ogohlantirishlar |
.alert-success |
Yashil ogohlantirish bloki. Muvaffaqiyatli yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-warning |
Sariq ogohlantirish bloki. Ushbu harakatda ehtiyot bo‘lish kerakligini bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.badge |
Doira shaklidagi nishon yaratadi (kulrang doira — ko‘pincha raqamli indikator sifatida ishlatiladi) | Sinab ko‘ring | Nishonlar |
.bg-danger |
Elementga qizil fon rangini qo‘shadi. Xavf yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Yordamchi klasslar |
.bg-info |
Elementga och ko‘k fon rangini qo‘shadi. Qandaydir ma’lumotni ifodalaydi | Sinab ko‘ring | Yordamchi klasslar |
.bg-primary |
Elementga ko‘k fon rangini qo‘shadi. Muhim narsani ifodalaydi | Sinab ko‘ring | Yordamchi klasslar |
.bg-success |
Elementga yashil fon rangini qo‘shadi. Muvaffaqiyat yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Yordamchi klasslar |
.bg-warning |
Elementga sariq fon rangini qo‘shadi. Ogohlantirish yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Yordamchi klasslar |
.breadcrumb |
Sahifalash turi. Joriy sahifaning navigatsiya iyerarxiyasidagi o‘rnini ko‘rsatadi | Sinab ko‘ring | Sahifalash |
.btn |
Oddiy tugma yaratadi (kulrang fon va yumaloq burchaklar) | Sinab ko‘ring | Tugmalar |
.btn-block |
Ota elementning butun kengligini egallaydigan blok darajasidagi tugma yaratadi | Sinab ko‘ring | Tugmalar |
.btn-danger |
Qizil tugma. Xavf yoki salbiy harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-default |
Standart tugma. Oq fon va kulrang chegara | Sinab ko‘ring | Tugmalar |
.btn-group |
Tugmalarni bitta qatorda guruhlaydi | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-justified |
Tugmalar guruhini ekranning butun kengligini egallaydigan qiladi | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-lg |
Katta tugmalar guruhi (tugmalar guruhidagi barcha tugmalarni kattalashtiradi — shrift o‘lchami va ichki chekinish oshadi) | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-sm |
Kichik tugmalar guruhi (tugmalar guruhidagi barcha tugmalarni kichraytiradi) | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-xs |
Juda kichik tugmalar guruhi (tugmalar guruhidagi barcha tugmalarni juda kichik qiladi) | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-vertical |
Tugmalar guruhini vertikal ravishda ustma-ust joylashgan ko‘rinishga keltiradi | Sinab ko‘ring | Tugmalar guruhi |
.btn-info |
Och ko‘k tugma. Ma’lumotni ifodalaydi | Sinab ko‘ring | Tugmalar |
.btn-link |
Tugmani havolaga o‘xshatib ko‘rsatadi (tugma xatti-harakati saqlanadi) | Sinab ko‘ring | Tugmalar |
.btn-lg |
Katta tugma | Sinab ko‘ring | Tugmalar |
.btn-primary |
Ko‘k tugma. | Sinab ko‘ring | Tugmalar |
.btn-sm |
Kichik tugma | Sinab ko‘ring | Tugmalar |
.btn-success |
Yashil tugma. Muvaffaqiyat yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-warning |
Sariq tugma. Ogohlantirish yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Tugmalar |
.btn-xs |
Juda kichik tugma | Sinab ko‘ring | Tugmalar |
.caption |
.thumbnail ichiga izoh (caption) matnini qo‘shadi |
Sinab ko‘ring | Rasmlar |
.caret |
Tugma ochiluvchi menyu ekanini bildiruvchi uchburchak strelka belgisini yaratadi | Sinab ko‘ring | Ochiluvchi menyular |
.carousel |
Karusel (slayd-shou) yaratadi | Sinab ko‘ring | Karusel |
.carousel-caption |
Karuseldagi har bir slayd uchun izoh (caption) matnini yaratadi | Sinab ko‘ring | Karusel |
.carousel-control |
"Keyingi" va "oldingi" havolalari uchun konteyner | Sinab ko‘ring | Karusel |
.carousel-indicators |
Har bir slayd pastiga kichik nuqtalar/indikatorlar qo‘shadi (ular karuselda nechta slayd borligini va foydalanuvchi hozir qaysi slaydni ko‘rayotganini bildiradi) | Sinab ko‘ring | Karusel |
.carousel-inner |
Slayd elementlari uchun konteyner | Sinab ko‘ring | Karusel |
.center-block |
Istalgan elementni markazlashtiradi (elementni margin-right:auto va margin-left:auto bilan display:block holatiga keltiradi) |
Sinab ko‘ring | Yordamchi klasslar |
.checkbox |
Checkbox’lar uchun konteyner | Sinab ko‘ring | Kiritish maydonlari |
.checkbox-inline |
Bir nechta checkbox’ni bitta qatorda ko‘rsatadi | Sinab ko‘ring | Kiritish maydonlari |
.clearfix |
Float’larni tozalaydi | Sinab ko‘ring | Yordamchi klasslar |
.close |
Yopish belgisini bildiradi | Sinab ko‘ring | Yordamchi klasslar |
.col-*-* |
Moslashuvchan grid (1-12 ustunni egallaydi). Juda kichik qurilmalar — telefonlar (< 768px), kichik qurilmalar — planshetlar (≥768px), o‘rta qurilmalar — kompyuterlar (≥992px), katta qurilmalar — kompyuterlar (≥1200px). Ustun qiymatlari 1-12 bo‘lishi mumkin. | Sinab ko‘ring | Grid |
.col-*-offset-* |
Ustunlarni o‘ngga suradi. Bu klasslar ustunning chap tashqi chekinishini (margin) * ustun miqdoriga oshiradi | Sinab ko‘ring | Grid |
.col-*-pull-* |
Grid ustunlarining tartibini o‘zgartiradi | Sinab ko‘ring | Grid |
.col-*-push-* |
Grid ustunlarining tartibini o‘zgartiradi | Sinab ko‘ring | Grid |
.collapse |
Yig‘iladigan kontentni bildiradi — uni talab bo‘yicha yashirish yoki ko‘rsatish mumkin | Sinab ko‘ring | Yig‘iladigan bloklar |
.collapse in |
Yig‘iladigan kontentni standart holatda ko‘rsatadi | Sinab ko‘ring | Yig‘iladigan bloklar |
.container |
Kengligi ekran o‘lchamiga qarab belgilanadigan qat’iy kenglikdagi konteyner. Chap va o‘ng tomonda bir xil tashqi chekinish (margin). | Sinab ko‘ring | Konteynerlar |
.container-fluid |
Ekranning butun kengligini egallaydigan konteyner | Sinab ko‘ring | Konteynerlar |
.control-label |
Yorliqdan (label) formani tekshirishda (validatsiya) foydalanish imkonini beradi | Sinab ko‘ring | Formalar |
.danger |
Jadval qatoriga (<tr>) yoki jadval katagiga (<td>) qizil fon qo‘shadi. Xavfli yoki salbiy oqibatga olib kelishi mumkin bo‘lgan amalni bildiradi |
Sinab ko‘ring | Jadvallar |
.disabled |
Tugmani nofaol qiladi (shaffoflik qo‘shadi, sichqoncha ustiga olib borilganda esa "to‘xtash taqiqlangan" belgisini ko‘rsatadi) | Sinab ko‘ring | Tugmalar |
.disabled |
Ochiluvchi menyu elementini nofaol qiladi (kulrang matn rangini qo‘shadi, sichqoncha ustiga olib borilganda esa "to‘xtash taqiqlangan" belgisini ko‘rsatadi) | Sinab ko‘ring | Ochiluvchi menyular |
.disabled |
Sahifalash (pagination) havolasini nofaol qiladi (uni bosib bo‘lmaydi — kulrang matn rangini qo‘shadi, sichqoncha ustiga olib borilganda esa "to‘xtash taqiqlangan" belgisini ko‘rsatadi) | Sinab ko‘ring | Sahifalash |
.disabled |
Ro‘yxat guruhidagi ro‘yxat elementini nofaol qiladi (uni bosib bo‘lmaydi — kulrang fon rangini qo‘shadi, sichqoncha ustiga olib borilganda esa "to‘xtash taqiqlangan" belgisini ko‘rsatadi) | Sinab ko‘ring | Ro‘yxat guruhlari |
.divider |
Ochiluvchi menyudagi havolalarni ingichka gorizontal chiziq bilan ajratish uchun ishlatiladi | Sinab ko‘ring | Ochiluvchi menyular |
.dl-horizontal |
<dl> elementlaridagi atamalar (<dt>) va tavsiflarni (<dd>) yonma-yon joylashtiradi. Dastlab standart <dl> kabi ko‘rinadi, biroq brauzer oynasi kengayganda ular yonma-yon joylashadi |
Sinab ko‘ring | Tipografiya |
.dropdown |
Foydalanuvchiga oldindan belgilangan ro‘yxatdan bitta qiymatni tanlash imkonini beruvchi, ochib-yopiladigan menyu yaratadi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-header |
Ochiluvchi menyu ichiga sarlavhalar qo‘shish uchun ishlatiladi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-menu |
Ochiluvchi menyu konteyneri uchun standart stillarni qo‘shadi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-menu-right |
Ochiluvchi menyuni o‘ng tomonga tekislaydi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-toggle |
Ochiluvchi menyuni yashiradigan va ko‘rsatadigan (toggle) tugmada ishlatiladi | Sinab ko‘ring | Ochiluvchi menyular |
.dropup |
Yuqoriga ochiluvchi (dropup) menyuni bildiradi (menyu pastga emas, yuqoriga ochiladi) | Sinab ko‘ring | Ochiluvchi menyular |
.embed-responsive |
Joylashtirilgan (embed) kontent uchun konteyner. Video yoki slayd-shoularning istalgan qurilmada to‘g‘ri masshtablanishini ta’minlaydi | Sinab ko‘ring | Rasmlar |
.embed-responsive-16by9 |
Joylashtirilgan (embed) kontent uchun konteyner. Tomonlari nisbati 16:9 bo‘lgan joylashtirilgan kontent yaratadi | Sinab ko‘ring | Rasmlar |
.embed-responsive-4by3 |
Joylashtirilgan (embed) kontent uchun konteyner. Tomonlari nisbati 4:3 bo‘lgan joylashtirilgan kontent yaratadi | Sinab ko‘ring | Rasmlar |
.embed-responsive-item |
.embed-responsive ichida ishlatiladi. Videoni ota elementga mos ravishda chiroyli masshtablaydi |
Sinab ko‘ring | Rasmlar |
.fade |
Ogohlantirish blokini yopishda asta-sekin yo‘qolish (fade) effektini qo‘shadi | Sinab ko‘ring | Ogohlantirishlar |
.form-control |
input, textarea va select elementlarida ularni sahifaning butun kengligi bo‘ylab yoyish va moslashuvchan qilish uchun ishlatiladi | Sinab ko‘ring | Formalar |
.form-control-feedback |
Formani tekshirish (validatsiya) klassi | Sinab ko‘ring | Kiritish maydonlari 2 |
.form-control-static |
Gorizontal forma ichida forma yorlig‘i yoniga oddiy matn qo‘shadi | Sinab ko‘ring | Kiritish maydonlari 2 |
.form-group |
Forma kiritish maydoni va yorlig‘i uchun konteyner | Sinab ko‘ring | Formalar |
.form-inline |
<form> elementini inline-block boshqaruv elementlari bilan chapga tekislangan qiladi (Bu faqat kengligi kamida 768px bo‘lgan viewport’lardagi formalarga taalluqli) | Sinab ko‘ring | Formalar |
.form-horizontal |
Yorliqlar va forma boshqaruv elementlari guruhlarini gorizontal maketda tekislaydi | Sinab ko‘ring | Formalar |
.glyphicon |
Belgi (icon) yaratadi. Bootstrap Glyphicons Halflings to‘plamidan 260 ta bepul glyphicon taqdim etadi | Sinab ko‘ring | Glyphicon’lar |
.has-danger |
Yorliqqa qizil rang, kiritish maydoniga qizil chegara, shuningdek kiritish maydoni ichiga xato belgisini qo‘shadi (.has-feedback bilan birga ishlatiladi) |
Sinab ko‘ring | Formalar |
.has-feedback |
Kiritish maydonlari uchun holat (feedback) belgilarini qo‘shadi (tasdiq, ogohlantirish va xato belgilari) | Sinab ko‘ring | Formalar |
.has-success |
Yorliqqa yashil rang, kiritish maydoniga yashil chegara, shuningdek kiritish maydoni ichiga tasdiq belgisini (checkmark) qo‘shadi (.has-feedback bilan birga ishlatiladi) |
Sinab ko‘ring | Formalar |
.has-warning |
Yorliqqa sariq/to‘q sariq rang, kiritish maydoniga sariq/to‘q sariq chegara, shuningdek kiritish maydoni ichiga tasdiq belgisini (checkmark) qo‘shadi (.has-feedback bilan birga ishlatiladi) |
Sinab ko‘ring | Formalar |
.help-block |
Yangi qatordan boshlanadigan va bir qatordan uzunroq bo‘lishi mumkin bo‘lgan yordamchi matn bloki. | Sinab ko‘ring | Kiritish maydonlari o‘lchami |
.hidden |
Elementni majburan yashiradi (display:none) |
Sinab ko‘ring | Yordamchi klasslar |
.hidden-* |
Ekran o‘lchamiga qarab kontentni yashiradi | Sinab ko‘ring | Yordamchi klasslar |
.hide |
Eskirgan. Uning o‘rniga .hidden dan foydalaning |
Sinab ko‘ring | Yordamchi klasslar |
.h1 - .h6 |
Elementni tanlangan klassdagi sarlavha (h1-h6) kabi ko‘rinishga keltiradi | Sinab ko‘ring | Tipografiya |
.icon-bar |
Navigatsiya panelida gamburger menyu (uchta gorizontal chiziq) yaratish uchun ishlatiladi | Sinab ko‘ring | Navigatsiya paneli |
.icon-next |
Karusellarda ishlatiladigan Unicode belgi (o‘ngga yo‘nalgan strelka). Ko‘pincha u glyphicon bilan almashtiriladi | Sinab ko‘ring | Karusel |
.icon-prev |
Karusellarda ishlatiladigan Unicode belgi (chapga yo‘nalgan strelka). Ko‘pincha u glyphicon bilan almashtiriladi | Sinab ko‘ring | Karusel |
.img-circle |
Rasmni doira shakliga keltiradi (IE8 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi) | Sinab ko‘ring | Rasmlar |
.img-responsive |
Rasmni moslashuvchan qiladi | Sinab ko‘ring | Rasmlar |
.img-rounded |
Rasmga yumaloq burchaklar qo‘shadi | Sinab ko‘ring | Rasmlar |
.img-thumbnail |
Rasmni eskiz (thumbnail) ko‘rinishiga keltiradi (chegaralar) | Sinab ko‘ring | Rasmlar |
.in |
Tablarni asta-sekin paydo qiladi (fade in) | Sinab ko‘ring | Tablar |
.info |
Jadval qatoriga (<tr>) yoki jadval katagiga (<td>) och ko‘k fon qo‘shadi. Neytral, axborot beruvchi o‘zgarish yoki amalni bildiradi |
Sinab ko‘ring | Jadvallar |
.initialism |
<abbr> elementi ichidagi matnni biroz kichikroq shrift o‘lchamida ko‘rsatadi |
Sinab ko‘ring | Tipografiya |
.input-group |
Kiritish maydoni oldiga yoki orqasiga "yordamchi matn" sifatida belgi (icon), matn yoki tugma qo‘shib, uni boyitish uchun ishlatiladigan konteyner | Sinab ko‘ring | Kiritish maydonlari |
.input-group-lg |
Katta kiritish guruhi | Sinab ko‘ring | Kiritish maydonlari |
.input-group-sm |
Kichik kiritish guruhi | Sinab ko‘ring | Kiritish maydonlari |
.input-group-addon |
.input-group klassi bilan birga bu klass kiritish maydoni yoniga belgi (icon) yoki yordamchi matn qo‘shish imkonini beradi |
Sinab ko‘ring | Kiritish maydonlari |
.input-group-btn |
.input-group klassi bilan birga bu klass kiritish maydoni yoniga tugma biriktiradi. Ko‘pincha qidiruv paneli sifatida ishlatiladi |
Sinab ko‘ring | Kiritish maydonlari |
.input-lg |
Katta kiritish maydoni | Sinab ko‘ring | Kiritish maydonlari o‘lchami |
.input-sm |
Kichik kiritish maydoni | Sinab ko‘ring | Kiritish maydonlari o‘lchami |
.invisible |
Elementni ko‘rinmas qiladi (visibility:hidden). Eslatma: Element ko‘rinmas bo‘lsa ham, sahifada joy egallaydi |
Sinab ko‘ring | Yordamchi klasslar |
.item |
Har bir karusel elementiga qo‘shiladigan klass. Element matn yoki rasm bo‘lishi mumkin | Sinab ko‘ring | Karusel |
.jumbotron |
Ichki chekinishli, yumaloq burchakli va ichidagi matnning shrift o‘lchamlarini kattalashtiradigan kulrang blok yaratadi. Maxsus kontent yoki ma’lumotga alohida e’tibor qaratish uchun katta blok yaratadi | Sinab ko‘ring | Jumbotron |
.label |
Elementga kulrang yumaloq blok qo‘shadi. Biror narsa haqida qo‘shimcha ma’lumot beradi (masalan, "Yangi") | Sinab ko‘ring | Yorliqlar |
.label-danger |
Qizil yorliq | Sinab ko‘ring | Yorliqlar |
.label-info |
Och ko‘k yorliq | Sinab ko‘ring | Yorliqlar |
.label-success |
Yashil yorliq | Sinab ko‘ring | Yorliqlar |
.label-warning |
Sariq yorliq | Sinab ko‘ring | Yorliqlar |
.lead |
Paragrafning shrift o‘lchami va qator balandligini oshiradi | Sinab ko‘ring | Tipografiya |
.left |
Karuselning chap boshqaruv elementini belgilash uchun ishlatiladi | Sinab ko‘ring | Karusel |
.list-group |
<li> elementlari uchun chegarali ro‘yxat guruhi yaratadi |
Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item |
Ro‘yxat guruhidagi har bir <li> elementiga qo‘shiladi |
Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-heading |
Ro‘yxat guruhi sarlavhasini yaratadi (<li> dan boshqa elementlarda ishlatiladi) |
Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-text |
Ro‘yxat guruhi ichidagi element matni uchun ishlatiladi (<li> dan boshqa elementlarda ishlatiladi) |
Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-danger |
Ro‘yxat guruhidagi ro‘yxat elementi uchun qizil fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-info |
Ro‘yxat guruhidagi ro‘yxat elementi uchun och ko‘k fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-success |
Ro‘yxat guruhidagi ro‘yxat elementi uchun yashil fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-warning |
Ro‘yxat guruhidagi ro‘yxat elementi uchun sariq fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-inline |
Barcha ro‘yxat elementlarini bitta qatorga joylashtiradi (gorizontal menyu) | Sinab ko‘ring | Tablar |
.list-unstyled |
<ul> yoki <ol> ro‘yxatidan barcha standart list-style stillarini (markerlar, chap tashqi chekinish va h.k.) olib tashlaydi |
Sinab ko‘ring | Tipografiya |
.mark |
Matnni ajratib ko‘rsatadi: Ajratib ko‘rsatilgan matn | Sinab ko‘ring | Tipografiya |
.media |
Media obyektlarni tekislaydi (masalan, rasm yoki videolarni — ko‘pincha blog postidagi izohlar va h.k. uchun ishlatiladi) | Sinab ko‘ring | Media obyektlar |
.media-body |
Media obyekt yonida ko‘rinishi kerak bo‘lgan matn | Sinab ko‘ring | Media obyektlar |
.media-heading |
Media obyekt ichida sarlavha yaratadi | Sinab ko‘ring | Media obyektlar |
.media-list |
Ichma-ich joylashgan media ro‘yxatlari | Sinab ko‘ring | Media obyektlar |
.media-object |
Media obyektni (rasm yoki video) bildiradi | Sinab ko‘ring | Media obyektlar |
.modal |
Kontentni modal oyna sifatida belgilaydi va fokusni unga o‘tkazadi | Sinab ko‘ring | Modal oynalar |
.modal-body |
Modal oyna tanasi (body) uchun stilni belgilaydi. Bu yerga istalgan HTML belgilashni (p, img va h.k.) qo‘shing | Sinab ko‘ring | Modal oynalar |
.modal-content |
Modal oynani bezaydi (chegara, fon rangi va h.k.). Kerak bo‘lsa, uning ichiga modal oynaning sarlavha qismi (header), tanasi (body) va pastki qismini (footer) qo‘shing | Sinab ko‘ring | Modal oynalar |
.modal-dialog |
Modal oynaning to‘g‘ri kengligi va tashqi chekinishini (margin) belgilaydi | Sinab ko‘ring | Modal oynalar |
.modal-footer |
Modal oynaning pastki qismi (footer) (ko‘pincha amal tugmasi va yopish tugmasini o‘z ichiga oladi) | Sinab ko‘ring | Modal oynalar |
.modal-header |
Modal oynaning sarlavha qismi (header) (ko‘pincha sarlavha va yopish tugmasini o‘z ichiga oladi) | Sinab ko‘ring | Modal oynalar |
.modal-lg |
Katta modal oyna (standartdan kengroq) | Sinab ko‘ring | Modal oynalar |
.modal-open |
Sahifa aylantirilishining (scroll) oldini olish uchun <body> elementida ishlatiladi (overflow:hidden) |
Sinab ko‘ring | Modal oynalar |
.modal-sm |
Kichik modal oyna (kengligi kichikroq) | Sinab ko‘ring | Modal oynalar |
.modal-title |
Modal oyna sarlavhasi | Sinab ko‘ring | Modal oynalar |
.nav nav-tabs |
Tabli menyuni bildiradi | Sinab ko‘ring | Tablar |
.nav nav-pills |
Pill (yumaloq tugmali) menyuni bildiradi | Sinab ko‘ring | Tablar |
.nav .navbar-nav |
Navigatsiya paneli ichidagi havolali ro‘yxat elementlarini o‘z ichiga olgan <ul> konteynerida ishlatiladi |
Sinab ko‘ring | Navigatsiya paneli |
.nav-justified |
Tablar/pill’larni markazlashtiradi. E’tibor bering, 768px dan kichik ekranlarda elementlar ustma-ust joylashadi (kontent markazda qoladi) | Sinab ko‘ring | Tablar |
.nav-stacked |
Tablar yoki pill’larni vertikal ravishda ustma-ust joylashtiradi | Sinab ko‘ring | Tablar |
.nav-tabs |
Tabli menyu yaratadi | Sinab ko‘ring | Tablar |
.navbar |
Navigatsiya panelini yaratadi | Sinab ko‘ring | Navigatsiya paneli |
.navbar-brand |
Logotip yoki sarlavhani ifodalash uchun navigatsiya paneli ichidagi havola yoki sarlavha elementiga qo‘shiladi | Sinab ko‘ring | Navigatsiya paneli |
.navbar-btn |
Navigatsiya paneli ichidagi tugmani vertikal tekislaydi | Sinab ko‘ring | Navigatsiya paneli |
.navbar-collapse |
Navigatsiya panelini yig‘adi (mobil telefonlar va kichik planshetlarda u yashiriladi va menyu/gamburger belgisi bilan almashtiriladi) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-default |
Standart navigatsiya panelini yaratadi (och kulrang fon rangi) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-fixed-bottom |
Navigatsiya panelini ekranning pastki qismida qotirib qo‘yadi (sticky/fixed) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-fixed-top |
Navigatsiya panelini ekranning yuqori qismida qotirib qo‘yadi (sticky/fixed) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-form |
Navigatsiya paneli ichidagi forma elementlarini vertikal markazlashtirish uchun ularga qo‘shiladi (to‘g‘ri ichki chekinish) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-header |
Logotip yoki sarlavhani ifodalovchi havola/elementni o‘z ichiga olgan konteyner elementga qo‘shiladi | Sinab ko‘ring | Navigatsiya paneli |
.navbar-inverse |
Qora navigatsiya panelini yaratadi (och kulrang o‘rniga) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-left |
Navigatsiya panelidagi havolalar, formalar, tugmalar yoki matnni chapga tekislaydi | Sinab ko‘ring | Navigatsiya paneli |
.navbar-link |
Elementni navigatsiya paneli ichidagi havola kabi ko‘rinadigan qilib bezaydi (havolalar (anchor) to‘g‘ri ichki chekinish va sichqoncha ustiga olib borilganda tagiga chiziq oladi, p yoki span kabi boshqa elementlar esa standart hover effektini oladi — inversiyalangan navigatsiya panelida oq rang, standart navigatsiya panelida esa qora rang) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-nav |
Navigatsiya paneli ichidagi havolali ro‘yxat elementlarini o‘z ichiga olgan <ul> konteynerida ishlatiladi |
Sinab ko‘ring | Navigatsiya paneli |
.navbar-right |
Navigatsiya panelidagi havolalar, formalar, tugmalar yoki matnni o‘ngga tekislaydi. | Sinab ko‘ring | Navigatsiya paneli |
.navbar-static-top |
Navigatsiya panelidan chap, yuqori va o‘ng chegaralarni (yumaloq burchaklarni) olib tashlaydi (standart navigatsiya paneli odatda kulrang chegara va 4px border-radius’ga ega) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-text |
Navigatsiya paneli ichidagi havola bo‘lmagan har qanday elementni vertikal tekislaydi (to‘g‘ri ichki chekinishni ta’minlaydi) | Sinab ko‘ring | Navigatsiya paneli |
.navbar-toggle |
Kichik ekranlarda navigatsiya panelini ochadigan tugmani bezaydi. Ochib-yopiladigan menyu belgisini (gamburger/chiziqlar) ko‘rsatish uchun ko‘pincha uchta .icon-bar klassi bilan birga ishlatiladi |
Sinab ko‘ring | Navigatsiya paneli |
.next |
Karusel boshqaruvida keyingi boshqaruv elementini belgilash uchun ishlatiladi | Sinab ko‘ring | Karusel |
.next |
Pager tugmalarini sahifaning o‘ng tomoniga tekislash uchun ishlatiladi ("keyingi" tugmasi) | Sinab ko‘ring | Pager |
.page-header |
Sarlavha ostiga gorizontal chiziq qo‘shadi (+ element atrofiga biroz qo‘shimcha bo‘sh joy qo‘shadi) | Sinab ko‘ring | Sahifa sarlavhasi |
.pager |
"Oldingi"/"keyingi" tugmalarini yaratadi (<ul> elementlarida ishlatiladi) |
Sinab ko‘ring | Pager |
.pagination |
Sahifalash (pagination) yaratadi (Sahifalari ko‘p bo‘lgan veb-saytingiz bo‘lsa foydali. <ul> elementlarida ishlatiladi) |
Sinab ko‘ring | Sahifalash |
.pagination-lg |
Katta sahifalash (har bir sahifalash havolasi 18px font-size oladi. Standart qiymat — 14px) | Sinab ko‘ring | Sahifalash |
.pagination-sm |
Kichik sahifalash (har bir sahifalash havolasi 12px font-size oladi. Standart qiymat — 14px) | Sinab ko‘ring | Sahifalash |
.panel |
Kontenti atrofida biroz ichki chekinishga ega chegarali blok yaratadi | Sinab ko‘ring | Panellar |
.panel-body |
Panel ichidagi kontent uchun konteyner | Sinab ko‘ring | Panellar |
.panel-collapse |
Yig‘iladigan panel (panel(lar)ni yashirish va ko‘rsatish o‘rtasida almashtiradi) | Sinab ko‘ring | Yig‘iladigan bloklar |
.panel-danger |
Qizil panel. Xavfni bildiradi | Sinab ko‘ring | Panellar |
.panel-info |
Och ko‘k panel. Ma’lumotni bildiradi | Sinab ko‘ring | Panellar |
.panel-success |
Yashil panel. Muvaffaqiyatni bildiradi | Sinab ko‘ring | Panellar |
.panel-warning |
Sariq panel. Ogohlantirishni bildiradi | Sinab ko‘ring | Panellar |
.panel-footer |
Panelning pastki qismini (footer) yaratadi (och fon rangi) | Sinab ko‘ring | Panellar |
.panel-group |
Bir nechta panelni birga guruhlash uchun ishlatiladi. Bu har bir panel ostidagi pastki tashqi chekinishni (margin) olib tashlaydi | Sinab ko‘ring | Panellar |
.panel-heading |
Panel sarlavhasini (header) yaratadi (och fon rangi) | Sinab ko‘ring | Panellar |
.panel-title |
Matn stilini sozlash uchun .panel-heading ichida ishlatiladi (tashqi chekinishlarni olib tashlaydi va 16px font-size qo‘shadi) |
Sinab ko‘ring | Panellar |
.popover |
Foydalanuvchi element ustiga bosganda paydo bo‘ladigan qalqib chiquvchi oyna | Sinab ko‘ring | Popover |
.pre-scrollable |
<pre> elementini aylantiriladigan (scrollable) qiladi (350px max-height beradi va y o‘qi bo‘yicha aylantirish chizig‘ini (scrollbar) qo‘shadi) |
Sinab ko‘ring | Yordamchi klasslar |
.prev |
Karusellarda "oldingi" havolasini bildirish uchun ishlatiladi | Sinab ko‘ring | Karusel |
.previous |
Pager tugmalarini sahifaning chap tomoniga tekislash uchun ishlatiladi ("oldingi" tugmasi) | Sinab ko‘ring | Pager |
.progress |
Progress barlar uchun konteyner | Sinab ko‘ring | Jarayon indikatorlari |
.progress-bar |
Progress bar yaratadi | Sinab ko‘ring | Jarayon indikatorlari |
.progress-bar-danger |
Qizil progress bar. Xavfni bildiradi | Sinab ko‘ring | Jarayon indikatorlari |
.progress-bar-info |
Och ko‘k progress bar. Ma’lumotni bildiradi | Sinab ko‘ring | Jarayon indikatorlari |
.progress-bar-striped |
Yo‘l-yo‘l progress bar yaratadi | Sinab ko‘ring | Jarayon indikatorlari |
.progress-bar-success |
Yashil progress bar. Muvaffaqiyatni bildiradi | Sinab ko‘ring | Jarayon indikatorlari |
.progress-bar-warning |
Sariq progress bar. Ogohlantirishni bildiradi | Sinab ko‘ring | Jarayon indikatorlari |
.pull-left |
Elementni chapga joylashtiradi (float) | Sinab ko‘ring | Yordamchi klasslar |
.pull-right |
Elementni o‘ngga joylashtiradi (float) | Sinab ko‘ring | Yordamchi klasslar |
.right |
Karuselning o‘ng boshqaruv elementini belgilash uchun ishlatiladi | Sinab ko‘ring | Karusel |
.row |
Moslashuvchan ustunlar uchun konteyner | Sinab ko‘ring | Grid |
.row-no-gutters |
Qator va uning ustunlaridan oraliqlarni (gutter) olib tashlaydi | Sinab ko‘ring | Grid |
.show |
Elementni ko‘rsatadi (display:block) |
Sinab ko‘ring | Yordamchi klasslar |
.small |
Istalgan sarlavhada ochroq, ikkilamchi matn yaratadi | Sinab ko‘ring | Tipografiya |
.sr-only |
Elementni ekran o‘quvchi dasturlardan tashqari barcha qurilmalarda yashiradi | Sinab ko‘ring | Yordamchi klasslar |
.sr-only-focusable |
Elementni ekran o‘quvchi dasturlardan tashqari barcha qurilmalarda yashiradi | Sinab ko‘ring | Yordamchi klasslar |
.success |
Jadval qatoriga (<tr>) yoki jadval katagiga (<td>) yashil fon rangini qo‘shadi. Muvaffaqiyat yoki ijobiy amalni bildiradi |
Sinab ko‘ring | Jadvallar |
.tab-content |
Almashtiriladigan/dinamik tablar/pill’lar yaratish uchun .tab-pane bilan birga ishlatiladi |
Sinab ko‘ring | Tablar |
.tab-pane |
Almashtiriladigan/dinamik tablar/pill’lar yaratish uchun .tab-content bilan birga ishlatiladi |
Sinab ko‘ring | Tablar |
.table |
Jadvalga asosiy stillarni qo‘shadi (ichki chekinish, pastki chegaralar va h.k.) | Sinab ko‘ring | Jadvallar |
.table-bordered |
Jadval va kataklarning barcha tomonlariga chegara qo‘shadi | Sinab ko‘ring | Jadvallar |
.table-condensed |
Kataklarning ichki chekinishini ikki baravar qisqartirib, jadvalni ixchamroq qiladi | Sinab ko‘ring | Jadvallar |
.table-hover |
Hover effektli jadval yaratadi (sichqoncha ustiga olib borilganda jadval qatorlariga kulrang fon rangini qo‘shadi) | Sinab ko‘ring | Jadvallar |
.table-responsive |
Jadvalni moslashuvchan qiladi (kerak bo‘lganda gorizontal aylantirish chizig‘ini qo‘shadi) | Sinab ko‘ring | Jadvallar |
.text-capitalize |
Har bir so‘zni bosh harf bilan boshlaydi | Sinab ko‘ring | Tipografiya |
.text-center |
Matnni markazga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-danger |
Qizil matn rangi. Xavfni bildiradi | Sinab ko‘ring | Tipografiya |
.text-hide |
Matnni yashiradi (element matn kontentini fon rasmi bilan almashtirishga yordam beradi) | Sinab ko‘ring | Tipografiya |
.text-info |
Och ko‘k matn rangi. Ma’lumotni bildiradi | Sinab ko‘ring | Tipografiya |
.text-justify |
Matnni kenglik bo‘yicha tekislaydi | Sinab ko‘ring | Tipografiya |
.text-left |
Matnni chapga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-lowercase |
Matnni kichik harflarga o‘zgartiradi | Sinab ko‘ring | Tipografiya |
.text-muted |
Kulrang matn rangi | Sinab ko‘ring | Tipografiya |
.text-nowrap |
Matnning keyingi qatorga o‘tishining oldini oladi | Sinab ko‘ring | Tipografiya |
.text-primary |
Ko‘k matn rangi | Sinab ko‘ring | Tipografiya |
.text-right |
Matnni o‘ngga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-success |
Yashil matn rangi. Muvaffaqiyatni bildiradi | Sinab ko‘ring | Tipografiya |
.text-uppercase |
Matnni katta harflarga o‘zgartiradi | Sinab ko‘ring | Tipografiya |
.text-warning |
Sariq/to‘q sariq matn rangi. Ogohlantirishni bildiradi | Sinab ko‘ring | Tipografiya |
.thumbnail |
Element (ko‘pincha rasm yoki video) eskiz (thumbnail) kabi ko‘rinishi uchun uning atrofiga chegara qo‘shadi | Sinab ko‘ring | Rasmlar |
.tooltip |
Foydalanuvchi sichqoncha kursorini element ustiga olib borganda paydo bo‘ladigan qalqib chiquvchi oyna | Sinab ko‘ring | Tooltip |
.visible-* |
v3.2.0 versiyasidan boshlab eskirgan. Qurilmaga qarab kontentni ko‘rsatish va/yoki yashirish uchun ishlatiladi. Eslatma: Uning o‘rniga .hidden-* dan foydalaning |
Sinab ko‘ring | Yordamchi klasslar |
.visible-print-block |
Chop etishda va chop etishni oldindan ko‘rishda elementni ko‘rsatadi (display:block) |
Yordamchi klasslar | |
.visible-print-inline |
Chop etishda va chop etishni oldindan ko‘rishda elementni ko‘rsatadi (display:inline) |
Yordamchi klasslar | |
.visible-print-inline-block |
Chop etishda va chop etishni oldindan ko‘rishda elementni ko‘rsatadi (display:inline-block) |
Yordamchi klasslar | |
.hidden-print |
Chop etishda va chop etishni oldindan ko‘rishda elementni yashiradi (display:none) |
Yordamchi klasslar | |
.warning |
Jadval qatoriga (<tr>) yoki jadval katagiga (<td>) sariq fon rangini qo‘shadi. Ogohlantirishni bildiradi |
Sinab ko‘ring | Jadvallar |
.well |
Element atrofiga kulrang fon rangi va biroz ichki chekinishga ega yumaloq chegara qo‘shadi | Sinab ko‘ring | Well’lar |
.well-lg |
Katta well (ko‘proq ichki chekinish) | Sinab ko‘ring | Well’lar |
.well-sm |
Kichik well (kamroq ichki chekinish) | Sinab ko‘ring | Well’lar |
Yuqoridagi jadvalda barcha mavjud Bootstrap 3 klasslari ko‘rsatilgan.
Maslahat: Barcha Bootstrap 4 klasslarining to‘liq ro‘yxatini ko‘rish uchun Bootstrap 4 barcha CSS klasslari ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!