Tra i diversi componenti di Bootstrap sicuramente dobbiamo citare i bottoni:
sono quelli che ci permettono di creare delle “call to action” efficaci per l’utente e semplici da realizzare.
I bottoni di Bootstrap hanno delle classi CSS ben precise, ci basta referenziare il nome del bottone per ottenerlo.
Qui sotto potete vedere come si presentano:
<div class="col-lg-12"> <!-- Bottone standard --> <button type="button" class="btn btn-default">Default</button> <!-- Primary --> <button type="button" class="btn btn-primary">Primary</button> <!-- Success --> <button type="button" class="btn btn-success">Success</button> <!-- Info --> <button type="button" class="btn btn-info">Info</button> <!-- Warning --> <button type="button" class="btn btn-warning">Warning</button> <!-- Danger --> <button type="button" class="btn btn-danger">Danger</button> <!-- Link --> <button type="button" class="btn btn-link">Link</button> </div>
Come potete vedere, ogni tipo di bottone ha le sue classi, una è uguale per tutti (.btn), le altre sono ben distinte a seconda del messaggio che vogliamo dare al visitatore.
Basta richiamare le classi predefinite di Bootstrap per ottenerli, se preferiamo un bottone più grande o più piccolo basta aggiungere la classe corrispondente (in questo caso large o small).
<div class="col-lg-12"> <!-- Bottone standard --> <button type="button" class="btn btn-default btn-lg">Default</button> <!-- Primary --> <button type="button" class="btn btn-primary">Primary</button> <!-- Success --> <button type="button" class="btn btn-success btn-sm">Success</button> <!-- Info --> <button type="button" class="btn btn-info btn-xs">Info</button> </div>
Alla pagina ufficiale di Bootstrap ci sono diversi esempi che potranno soddisfare la vostra curiosità.
I bottoni di Bootstrap possono anche essere riuniti in gruppi, in questo modo:
<div class="col-lg-12"> <div class="row"> <div class="btn-group btn-group-lg" role="group" aria-label="..."> <button type="button" class="btn btn-danger">Sinistra</button> <button type="button" class="btn btn-warning">Centro</button> <button type="button" class="btn btn-success">Destra</button> </div> </div> </div> <div class="col-lg-12"> <div class="row"> <div class="btn-group btn-group-sm" role="group" aria-label="..."> <button type="button" class="btn btn-danger">Sinistra</button> <button type="button" class="btn btn-warning">Centro</button> <button type="button" class="btn btn-success">Destra</button> </div> </div> </div> <div class="col-lg-12"> <div class="row"> <div class="btn-group btn-group-xs" role="group" aria-label="..."> <button type="button" class="btn btn-danger">Sinistra</button> <button type="button" class="btn btn-warning">Centro</button> <button type="button" class="btn btn-success">Destra</button> </div> </div> </div>
Può essere un’idea per aggiungere i numeri delle pagine di un blog (paginazione):
<div class="row"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group" role="group" aria-label="First group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> </div> <div class="btn-group" role="group" aria-label="Second group"> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-default">8</button> </div> </div> </div>
Vi rimando al video in cui trovate tutti gli esempi spiegati in questo articolo.
Buona visione 🙂
Link utili:
- Bootstrap – il sito ufficiale
- Start Bootstrap – Templates e temi gratuiti da scaricare
- Bootstrapzero – Collezione di templates gratuiti e a pagamento
- Bootstrap Hero – Inesauribile risorsa Bootstrap in cui troverete componenti, templates, link e riferimenti a tutto il materiale disponibile su questo framework
Precedenti tutorial:
Twitter Bootstrap: creare un template (prima parte)
Twitter Bootstrap: creare un template (seconda parte)
Bootstrap 3: il sistema a griglia
Bootstrap 3: aggiungiamo le icone di Glyphicon
Scarica i files del tutorial
Ciao, ottimo tutorial, solo una domanda: i bottoni si aprono sempre verso destra, e questo, se utilizzato su schermi di piccole dimensioni, è un problema, poiché il bottone espanso (parlo dei dropdown) escono dai bordi.
Non ci sarebbe un modo per farli collassare verso l’interno dello schermo?