JS Düğme (button.js)
Eğer düğmelerin üzerinde fazla kontrol sahibi olmak istiyorsanız bu eklentiyi kullanın.
Düğmeler hakkında bir eğitim için bizim okuma Bootstrap Düğmeleri Eğitimi .
Düğme Eklenti Sınıflar
Aşağıdaki sınıflar herhangi stil kullanılabilir <a>, <button> veya <input> öğesi:
| Sınıf | Açıklama | Örnek |
|---|---|---|
| .btn | herhangi bir düğmeye temel stil ekler | Dene |
| .btn-default | Varsayılan bir standart / düğmesini gösterir | Dene |
| .btn-primary | Ekstra görsel ağırlık verir ve buton takımının birincil eylemi tanımlar | Dene |
| .btn-success | Başarılı ya da pozitif eylemi gösterir | Dene |
| .btn-info | bilgilendirme uyarı mesajları için Bağlamsal düğmesi | Dene |
| .btn-warning | Dikkat Bu eylem ile alınmalıdır belirtir | Dene |
| .btn-danger | tehlikeli veya olumsuz etkisini gösterir | Dene |
| .btn-link | Bir düğme bir bağlantı olduğu izlenimini veriyor (will still have button behavior) | Dene |
| .btn-lg | Büyük bir düğme yapar | Dene |
| .btn-sm | Küçük bir düğme yapar | Dene |
| .btn-xs | Ekstra küçük düğme yapar | Dene |
| .btn-block | Yapar bir blok düzeyi bir düğme (spans the full width of the parent element) | Dene |
| .active | düğmesine basıldığında görünür yapar | Dene |
| .disabled | devre dışı düğmeye yapar | Dene |
JavaScript aracılığıyla
el ile etkinleştirme:
$('.btn').button();
Düğme Seçenekleri
| Yok |
Düğme Yöntemleri
Aşağıdaki tabloda mevcut tüm düğme yöntemlerini listeler.
Not: Bu eklenti için yöntemler de veri özellikleri ile geçirilebilir; Veri-geçiş ya da veri yüklemesi olarak, veriye yöntem adı ekleyin.
| Yöntem | Açıklama | Dene |
|---|---|---|
| . button("toggle") | basılan düğme görünüm yapar | Dene |
| . button("loading") | Düğmesini devre dışı bırakır ve düğme metni değiştirir "loading..." | Dene |
| . button("reset") | Orijinal metne düğme metni değiştirir (if changed) | Dene |
| . button("string") | Yeni bir düğme metni belirtir | Dene |
Örnekler
CSS kullanarak Düğmeleri Özelleştir'in
yuvarlak sınırları nasıl kaldırılır:
Belirli bir renk katmak için:
Örnek
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} Kendin dene " gölgeler nasıl eklenir: