Önyükleme JS Düğmesi
JS Düğmesi (button.js)
Düğmeleriniz üzerinde daha fazla kontrol sahibi olmak istiyorsanız bu eklentiyi kullanın.
Düğmeler hakkında bir eğitim için Önyükleme Düğmeleri Eğitimimizi okuyun .
Düğme Eklenti Sınıfları
Aşağıdaki sınıflar, herhangi bir <a>, <button> veya <input> öğesinin stilini oluşturmak için kullanılabilir:
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | |
| .btn-default | Indicates a default/standard button | |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | |
| .btn-success | Indicates a successful or positive action | |
| .btn-info | Contextual button for informational alert messages | |
| .btn-warning | Indicates caution should be taken with this action | |
| .btn-danger | Indicates a dangerous or potentially negative action | |
| .btn-link | Makes a button look like a link (will still have button behavior) | |
| .btn-lg | Makes a large button | |
| .btn-sm | Makes a small button | |
| .btn-xs | Makes an extra small button | |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | |
| .active | Makes the button appear pressed | |
| .disabled | Makes the button disabled |
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
$('.btn').button();
Düğme Seçenekleri
| None |
Düğme Yöntemleri
Aşağıdaki tablo, mevcut tüm düğme yöntemlerini listeler.
Not: Bu eklenti için yöntemler, veri öznitelikleri aracılığıyla da iletilebilir; veri değiştirme veya veri yüklemede olduğu gibi yöntem adını data- öğesine ekleyin.
| Method | Description | Try it |
|---|---|---|
| .button("toggle") | Makes the button look pressed | |
| .button("loading") | Disables the button and changes the button text to "loading..." | |
| .button("reset") | Changes the button text to original text (if changed) | |
| .button("string") | Specifies a new button text |
Daha fazla örnek
Düğmeleri Özelleştirmek için CSS Kullanmak
Yuvarlatılmış kenarlıklar nasıl kaldırılır:
Örnek
.btn-default {
border-radius: 0;
}
Belirli bir renk nasıl eklenir:
Örnek
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
Gölgeler nasıl eklenir:
Örnek
.btn-default {
box-shadow: 1px 2px 5px #000000;
}