Gli stili dei button con Bootstrap

di Daniele Bochicchio, in HTML5, CSS3, Boostrap,

Boostrap introduce una serie di stili che possono essere applicati a qualsiasi tag (button, input, a o perfino uno span), per applicare effetti che ricordano un pulsante. In generale, è consigliabile utilizzare button, per avere una maggiore compatibilità cross-browser:

<a class="btn btn-default" href="#" role="button">Salva</a>
<input class="btn btn-default" type="button" value="Annulla" />
<button class="btn btn-default" type="submit">Elimina</button>

Oltre a btn, è possibile accompagnare anche uno stile che indica uno stato:

  • btn-default: indica che è il pulsante predefinito;
  • btn-primary: indica che è il pulsante principale;
  • btn-success: il pulsante è associato allo stato di successo;
  • btn-info: ha uno stile informativo;
  • btn-warning: lo stato che indica è quello di attenzione;
  • btn-danger: indica che è il pulsante associato ad un'azione pericolosa;
  • btn-link: rimuove lo stile del pulsante, facendo diventare l'elemento un link e mantenendo il comportamento tipico di un pulsante.

Infine, è possibile regolare la dimensione servendoci di questi stili:

  • btn-lg: per aumentarne la dimensione;
  • btn-sm: per un pulsante piccolo;
  • btn-xs: per un pulsante molto piccolo.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi