JS Button
Button CSS klasslari
Tugmalar haqidagi darslik uchun Bootstrap tugmalar darsligimizni o‘qing.
Quyidagi klasslar yordamida istalgan <a>, <button> yoki <input> elementini bezash mumkin:
| Klass | Tavsif | Misol |
|---|---|---|
.btn |
Istalgan tugmaga asosiy stillarni qo‘shadi | Sinab ko‘ring |
.btn-block |
Blok darajasidagi tugma yaratadi (ota elementning butun kengligini egallaydi) | Sinab ko‘ring |
.btn-danger |
Xavfli yoki salbiy oqibatlarga olib kelishi mumkin bo‘lgan harakatni bildiradi | Sinab ko‘ring |
.btn-dark |
To‘q kulrang tugma | Sinab ko‘ring |
.btn-default |
Standart tugmani bildiradi | Sinab ko‘ring |
.btn-info |
Axborot beruvchi ogohlantirish xabarlari uchun kontekstual tugma | Sinab ko‘ring |
.btn-lg |
Katta tugma yaratadi | Sinab ko‘ring |
.btn-light |
Och kulrang tugma | Sinab ko‘ring |
.btn-link |
Tugmani havolaga o‘xshatadi (tugma xatti-harakati saqlanib qoladi) | Sinab ko‘ring |
.btn-outline-* |
Hoshiyali (outline) tugma yaratadi. * o‘rnida istalgan kontekstual klassdan foydalaning (btn-outline-primary, btn-outline-success va h.k.) | Sinab ko‘ring |
.btn-primary |
Qo‘shimcha vizual urg‘u beradi va tugmalar to‘plamidagi asosiy harakatni belgilaydi | Sinab ko‘ring |
.btn-sm |
Kichik tugma yaratadi | Sinab ko‘ring |
.btn-success |
Muvaffaqiyatli yoki ijobiy harakatni bildiradi | Sinab ko‘ring |
.btn-secondary |
"Kamroq" muhim harakatni bildiradi | Sinab ko‘ring |
.btn-toolbar |
Murakkabroq komponentlar uchun tugmalar guruhlari to‘plamlarini tugmalar paneliga (toolbar) birlashtiradi | Sinab ko‘ring |
.btn-warning |
Bu harakatda ehtiyot bo‘lish kerakligini bildiradi | Sinab ko‘ring |
.active |
Tugmani bosilgan ko‘rinishga keltiradi | Sinab ko‘ring |
.disabled |
Tugmani nofaol qiladi | Sinab ko‘ring |
JavaScript orqali
Qo‘lda faollashtirish uchun:
$('.btn').button();
Button parametrlari (options)
| Yo‘q |
Button metodlari
Quyidagi jadvalda barcha mavjud button metodlari keltirilgan.
Eslatma: Metodlarni data atributlari orqali ham uzatish mumkin; buning uchun metod nomini data- ga qo‘shing, masalan, data-toggle yoki data-dispose.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .button("toggle") | Tugmani bosilgan ko‘rinishga keltiradi | Sinab ko‘ring |
| .button("dispose") | Elementning button’ini yo‘q qiladi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!