Lezione 5 - I bottoni in Bootstrap

Dopo aver visto le varie classi utilizzate per i form in quest'articolo andremo a vedere come lavorare con i bottoni.

Per prima cosa dobbiamo ricordarci che le classi che il framework usa per i bottoni possono essere utilizzate per i tag html <a>, <button> , <input>

La classe di riferimento per i bottoni in bootstrap è 'btn' solitamente associata ad altre classi che identifica il tipo di bottone:

<a class="btn btn-default" href="#" role="button">Codeplus Link</a>
<button class="btn btn-default" type="submit">Codeplus Button</button>
<input class="btn btn-default" type="button" value="Codeplus input">
<input class="btn btn-default" type="submit" value="Codeplus Submit">

Il Codice qui sopra genera il seguente riusltato:

Sfondo e colore bottoni

Come possiamo vedere la classe utilizzata nell'esempio precedente insieme a 'btn' è stata la classe 'btn-default' che restituisce un bottone con sfondo bianco. Il framework bootstrap per definire lo sfondo dei bottoni offre altre 6 classi oltre a 'btn-default' e sono:

• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-link

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Il risultato è il seguente:

Dimensione bottoni

Oltre allo sfondo e al colore dei bottoni si possono diversificare i bottoni per grandezza con le seguenti classi:

• btn-lg
• btn-sm
• btn-xs

Large button

Small button

Extra small button

Altre classi e attributi

Le ultime classi che possiamo associare ai bottoni in bootstrap sono:

• btn-block
• active

'btn-block' crea un elemento di blocco full-width, che prenderà quindi il 100% dell'elemento genitore.

'active' assegnerà le stesse proprietà della pseudo-classe ':active', il bottone sarà come se fosse sempre cliccato.

Infine possiamo utilizzare l'attributo 'disabled=disabled' per disattivere il click all'elemento <button>