Ultimele tutoriale de dezvoltare web
 

Bootstrap Buton JS


JS Button (button.js)

Utilizați acest plugin dacă doriți să aveți mai mult control asupra butoane.

Pentru un tutorial despre butoane, citiți noastre Bootstrap Butoane Tutorial .


Clasele buton Plugin

Clasele de mai jos pot fi folosite pentru orice stil <a>, <button> sau <input> Element:

Clasă Descriere Exemplu
.btn Adaugă un stil de bază pentru orice buton Incearca-l
.btn-default Indică un buton implicit / Standard Incearca-l
.btn-primary Oferă greutate vizuală în plus și identifică acțiunea principală într-un set de butoane Incearca-l
.btn-success Indică o acțiune de succes sau pozitiv Incearca-l
.btn-info Butonul contextuală pentru mesaje de alertă informaționale Incearca-l
.btn-warning Indică faptul că precauție trebuie luate cu această acțiune Incearca-l
.btn-danger Indică o acțiune periculoasă sau potențial negativ Incearca-l
.btn-link Face un buton arata ca un link (will still have button behavior) în (will still have button behavior) un (will still have button behavior) Incearca-l
.btn-lg Face un buton mare Incearca-l
.btn-sm Face un mic buton Incearca-l
.btn-xs Face un buton foarte mic Incearca-l
.btn-block Face un buton de nivel bloc (spans the full width of the parent element) se (spans the full width of the parent element) pe (spans the full width of the parent element) Incearca-l
.active Face butonul par apăsat Incearca-l
.disabled Face butonul dezactivat Incearca-l

Via JavaScript

Activați manual cu:

$('.btn').button();

Opțiuni buton

Nici unul

Metode Button

Tabelul de mai jos listează toate disponibile metode de buton.

Notă: Pentru acest plugin, metode pot fi , de asemenea , transmise prin atribute de date; adăugați numele metodei pentru a datelor, ca în date de comutare sau de date de încărcare.

Metodă Descriere Incearca-l
. button("toggle") Face butonul aspectul apăsat Incearca-l
. button("loading") Dezactivează butonul și modifică textul buton pentru "loading..." Incearca-l
. button("reset") Schimbă textul buton pentru textul original (if changed) este (if changed) Incearca-l
. button("string") Specifică un text nou buton Incearca-l

Exemple

Exemple

Utilizarea CSS pentru a Particularizați butoane

Cum de a elimina frontierele rotunjite:

Exemplu

.btn-default {
    border-radius: 0;
}
Încearcă - l singur »

Cum se adaugă o anumită culoare:

Exemplu

.btn-default {
    background: #000;
    color: #fff;
}

.btn-default:hover {
    background: #fff;
    color: #000;
}
Încearcă - l singur »

Cum se adaugă umbre:

Exemplu

.btn-default {
    box-shadow: 1px 2px 5px #000000;
}
Încearcă - l singur »