Nelle lezioni precedenti ci è capitato di utilizzare dei pulsanti. Ora è giunto il momento di trattarli in modo più approfondito e capire, in modo compiuto, come sirealizzano e come è possibili personalizzarli in base alle proprie esigenze di web-design.
Innanzi tutto, diciamo che per creare un pulsante, occorre usare un elemento button o a o input e assegnargli la classe btn. Questa è la classe "essenziale" che qualifica un elemento come bottone, tuttavia assegnando delle classi aggiuntive si può agire sull’aspetto, la dimensione e il comportamento del pulsante.
Modificare il colore di un pulsante
Il primo tipo di classi che sperimenteremo permette di modificare il colore del pulsante. E’ bene ricordare, quando si sviluppa un sito web, che il colore ha un ruolo evocativo, pertanto è bene utilizzare, per ciascun pulsante, un colore che ne suggerisca la funzione.
<!-- Pulsante standard con gradiente -->
<button type="button" class="btn btn-default">Predefinito</button>
<!-- Pulsante blu che indica la azione principale in un set di pulsanti-->
<button type="button" class="btn btn-primary">Principale</button>
<!-- Pulsante vedre che indica una azione avvenuta con successo -->
<button type="button" class="btn btn-success">Successo</button>
<!-- Pulsante azzurro contestuale per messaggi di informazione -->
<button type="button" class="btn btn-info">Info</button>
<!-- Pulsante arancio che indica che la azione del pulsante è da eseguire con cautela -->
<button type="button" class="btn btn-warning">Attenzione</button>
<!-- Pulsante rosso che indica una azione potenzialmente pericolosa -->
<button type="button" class="btn btn-danger">Pericolo</button>
<!-- Mantiene le funzionalità di un pulsante ma viene visualizzato come collegamento -->
<button type="button" class="btn btn-link">Link</button>Ecco il risultato
Dimensioni
Ciascuno di questi tipi di pulsanti può essere declinato in dimensioni diverse mediante la semplice aggiunta di una apposita classe.
<!-- Pulsante standard -->
<button type="button" class="btn btn-default">Dimensione standard</button>
<!-- Pulsante grande -->
<button type="button" class="btn btn-default btn-lg">Grande</button>
<!-- Pulsante piccolo -->
<button type="button" class="btn btn-default btn-sm">Piccolo</button>
<!-- Pulsante molto piccolo -->
<button type="button" class="btn btn-default btn-xs">Molto piccolo</button>Vediamo il risultato visivo di questi markup:
Pulsanti in blocco
Bootstrap permette anche di creare pulsanti di tipo "block", cioè che si estendono per tutta la larghezza dell’elemento contenitore con la semplice aggiunta della classe .btn-block.
Disabilitare un pulsante
In talune circostanze può essere utile disabilitare un pulsante. A tal fine Bootstrap supporta l’attributo disabled del tag button:
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
Pulsante disabilitato</button>
<button type="button" class="btn btn-default btn-lg" >Pulsante attivo</button>
Purtroppo, nelle versioni di Internet Explorer dalla 9 in giù il pulsante viene mostrato con il testo grigio e uno sgradevole effetto di ombra. Questo è molto evidente se si usano pulsanti diversi da quello di default. La figura che segue, ad esempio, mostra in alto come viene reso da Chrome un pulsante di classe btn-primary disabilitato e in basso da Internet Explorer 8.
Come potete vedere i due pulsanti differiscono nel colore del testo ed anche nella forma degli angoli che su IE8 risultano quadrati in quanto il browser è privo del supporto alla proprietà border-radius di CSS3.
