Pulsante JS (button.js)
Usare questo plugin se si vuole avere un maggiore controllo sui pulsanti.
Per un tutorial su pulsanti, leggere i nostri Bootstrap pulsanti Tutorial .
Le Classi pulsante Plugin
Le classi inferiori possono essere utilizzati per lo stile qualsiasi <a>, <button> , o <input> elemento:
| Classe | Descrizione | Esempio |
|---|---|---|
| .btn | Aggiunge lo stile di base a qualsiasi pulsante | Provalo |
| .btn-default | Indica un pulsante di default / standard di | Provalo |
| .btn-primary | Fornisce peso visivo in più e identifica l'azione principale in una serie di pulsanti | Provalo |
| .btn-success | Indica un'azione di successo o positiva | Provalo |
| .btn-info | tasto contestuale per i messaggi di avviso informativo | Provalo |
| .btn-warning | Indica si deve usare cautela con questa azione | Provalo |
| .btn-danger | Indica un'azione pericolosa o potenzialmente negativo | Provalo |
| .btn-link | Fa un pulsante l'aspetto di un collegamento (sarà ancora avere un comportamento pulsante) | Provalo |
| .btn-lg | Fa un grande pulsante | Provalo |
| .btn-sm | Fa un piccolo pulsante | Provalo |
| .btn-xs | Fa un piccolo pulsante in più | Provalo |
| .btn-block | Rende un pulsante a livello di blocco (si estende per l'intera larghezza dell'elemento genitore) | Provalo |
| .active | Rende il pulsante appare premuto | Provalo |
| .disabled | Rende il pulsante disattivato | Provalo |
Via JavaScript
Attivare manualmente con:
$('.btn').button();
Opzioni pulsante
| None |
Metodi Button
La seguente tabella elenca i metodi pulsante Tutti disponibili.
Nota: Per questo plugin, i metodi possono essere passati anche attraverso gli attributi di dati; aggiungere il nome del metodo da data-, come nel data-ginocchiera o dati di caricamento.
| metodo | Descrizione | Provalo |
|---|---|---|
| .button("toggle") | Rende premuto il pulsante di sguardo | Provalo |
| .button("loading") | Disabilita il pulsante e cambia il testo del pulsante di "loading ..." | Provalo |
| .button("reset") | Modifica il testo del pulsante per il testo originale (se è cambiata) | Provalo |
| .button("string") | Specifica un nuovo testo del pulsante | Provalo |
Esempi
Utilizzo di CSS per personalizzare i pulsanti
Come rimuovere i bordi arrotondati:
Come aggiungere un colore specifico:
Esempio
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} Prova tu stesso " Come aggiungere le ombre: