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>


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow