twitter-bootstrap
pulsanti
Ricerca…
Sintassi
- Classi: .btn-default | .btn-primary | .btn-successo | .btn-info | .btn-warning | .btn-danger | .btn-link;
- Dimensioni: .btn-lg | .btn-md | .btn-sm | .btn-XS;
- Stato: attivo | dissabled.
Classi di pulsanti
Bootstrap offre più classi per i pulsanti di stile e facendoli risaltare.
I pulsanti Bootstrap possono essere creati aggiungendo la classe .btn a un elemento.
| Bootstrap Class | Ruolo (colore) |
|---|---|
.btn-default | Pulsante standard (bianco) |
.btn-primary | Fornisce un peso visivo extra e identifica l'azione primaria (blu) |
.btn-success | Utilizzato per indicare un'azione riuscita (verde) |
.btn-info | Pulsante contestuale per fornire informazioni (blu chiaro) |
.btn-warning | Indica che l'utente deve essere cauto (giallo) |
.btn-danger | Indica un'azione pericolosa o negativa (rosso) |
.btn-link | Fai apparire il tuo pulsante come un tag di ancoraggio. |
Dimensioni dei pulsanti
Puoi anche creare diverse dimensioni di pulsanti con le classi .btn-size
| Bootstrap Class | Risultato |
|---|---|
.btn-lg | Crea un pulsante di dimensioni maggiori |
.btn-sm | Crea un pulsante di dimensioni più piccole |
.btn-xs | Crea un pulsante extra-piccolo |
.btn-block | I pulsanti diventano elementi a livello di blocco e coprono l'intera larghezza del genitore |
Rendi attivo il pulsante
La classe active farà apparire premuto un pulsante.
<button type="button" class="btn btn-primary active">Active Primary</button>
Disabilita un pulsante
L'aggiunta della classe disabled a un pulsante renderà il pulsante non selezionabile e mostrerà un cursore proibito quando ci si passa sopra.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Renderizza i pulsanti orizzontalmente insieme
Più pulsanti possono essere resi orizzontalmente con la classe .btn-group . Basta avvolgere i pulsanti all'interno di un elemento contenitore e assegnare a quell'elemento la classe btn-group.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Renderizza i pulsanti verticalmente
Applica la .btn-group-vertical all'elemento contenitore
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Fai in modo che il gruppo di pulsanti occupi tutta la larghezza
I pulsanti racchiusi all'interno di un elemento .btn-group occupano solo la larghezza necessaria. Per fare in modo che il gruppo si .btn-group-justified l'intera larghezza dello schermo, usa invece .btn-group-justified .
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>