JS tugma
JS Button (button.js)
Tugmalaringizni ko‘proq boshqarishni istasangiz, ushbu plagindan foydalaning.
Tugmalar bo‘yicha darslik uchun Bootstrap tugmalar darsligimizni o‘qing.
Button plagini klasslari
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-default | Standart (odatiy) tugmani bildiradi | Sinab ko‘ring |
| .btn-primary | Qo‘shimcha vizual urg‘u beradi va tugmalar to‘plamidagi asosiy amalni belgilaydi | Sinab ko‘ring |
| .btn-success | Muvaffaqiyatli yoki ijobiy harakatni bildiradi | Sinab ko‘ring |
| .btn-info | Axborot beruvchi ogohlantirish xabarlari uchun kontekstual tugma | Sinab ko‘ring |
| .btn-warning | Bu amalda ehtiyot bo‘lish kerakligini bildiradi | Sinab ko‘ring |
| .btn-danger | Xavfli yoki salbiy oqibatga olib kelishi mumkin bo‘lgan harakatni bildiradi | Sinab ko‘ring |
| .btn-link | Tugmani havola kabi ko‘rinadigan qiladi (tugma xatti-harakati saqlanib qoladi) | Sinab ko‘ring |
| .btn-lg | Katta tugma yaratadi | Sinab ko‘ring |
| .btn-sm | Kichik tugma yaratadi | Sinab ko‘ring |
| .btn-xs | Juda kichik tugma yaratadi | Sinab ko‘ring |
| .btn-block | Blok darajasidagi tugma yaratadi (ota elementning butun kengligini egallaydi) | Sinab ko‘ring |
| .active | Tugmani bosilgan ko‘rinishga keltiradi | Sinab ko‘ring |
| .disabled | Tugmani nofaol qiladi | Sinab ko‘ring |
JavaScript orqali
Qo‘lda quyidagicha yoqing:
$('.btn').button();
Button parametrlari
| Yo‘q |
Button metodlari
Quyidagi jadvalda barcha mavjud button metodlari keltirilgan.
Eslatma: Bu plagin uchun metodlarni data atributlari orqali ham uzatish mumkin; buning uchun metod nomini data- ga qo‘shing, masalan: data-toggle yoki data-loading.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .button("toggle") | Tugmani bosilgan ko‘rinishga keltiradi | Sinab ko‘ring |
| .button("loading") | Tugmani nofaol qiladi va tugma matnini "loading..." ga o‘zgartiradi | Sinab ko‘ring |
| .button("reset") | Tugma matnini asl matnga qaytaradi (agar u o‘zgartirilgan bo‘lsa) | Sinab ko‘ring |
| .button("string") | Tugmaning yangi matnini belgilaydi | Sinab ko‘ring |
Ko‘proq misollar
Tugmalarni CSS yordamida moslashtirish
Yumaloq chegaralarni qanday olib tashlash mumkin:
Muayyan rangni qanday qo‘shish mumkin:
Misol
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
O‘zingiz sinab ko‘ring »
Soyalarni qanday qo‘shish mumkin:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!