Bootstrap Button: Aggiungere bottoni con Bootstrap

Continuiamo a parlare di Bootstrap e vediamo come aggiungere pulsanti alla nostra interfaccia web usando la componente Button di Bootstrap.

Bootstrap mette a disposizione diversi pulsanti con stili predefiniti, ciascuno con un proprio scopo semantico. Inoltre, ti da la possibilità di aggiungere proprietà extra per un maggiore controllo. Ma partiamo dalle basi e vediamo prima come creare un pulsante semplice con Bootstrap.

Come creare pulsanti con Bootstrap Button

La classe da associare al tag <button> per creare un pulsante con Bootstrap è btn. Ma puoi usare anche anche i tag <a> o <input> per creare pulsanti, ai quali naturalmente dovrà essere sempre associata la classe btn.

Nel caso in cui decidessi di usare il tag <a>, ricordati di aggiungere l’attributo role=”button” al fine di garantire una corretta interpretazione del contenuto anche agli screen reader. In questo modo la pagina rispetterà le specifiche di accessibilità.

Ecco alcuni esempi di codice con il quale è possibile creare pulsanti con Bootstrap:

<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
<input class="btn" type="reset" value="Reset">

Per creare un “Bootstrap Button”  con uno degli stili predefiniti, si deve aggiungere alla classe btn una delle seguenti classi:

• btn-primary: sfondo blu e testo bianco.
• btn-secondary: sfondo grigio e testo bianco.
• btn-success: sfondo verde e testo bianco.
• btn-info: sfondo azzurro e testo bianco.
• btn-warning: sfondo arancione e testo nero.
• btn-danger : sfondo rosso e testo bianco.
• btn-light: sfondo grigio chiaro e testo nero.
• btn-dark: sfondo nero e testo bianco.
• btn-link: sfondo trasparente e testo blu.

Scrivendo il seguente codice su una pagina di esempio ed aprendola con il browser, vedrai diversi pulsanti ognuno con uno stile differente predefinito:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Outline buttons

Se i colori di sfondo dei pulsanti non sono di tuo gradimento, puoi usare la classe .btn-outline-* per dare del colore solo al contorno ed al testo, creando, in questo modo, dei pulsanti con un aspetto più delicato.

Prova il codice qui sotto per vedere il risultato con i vari stili messi a disposizione da Outline buttons di Bootstrap:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Vediamo ora come modificare le dimensioni e lo stato (attivo o disattivato) del pulsante.

Stato e dimensioni di Bootstap Button

In Bootstrap ci sono 4 dimensioni predefinite per i pulsanti che sono large, normal, small ed extrasmall:

• un pulsante large si crea aggiungendo la classe btn-lg;
• normal è impostato di default, quindi non si aggiunge nessuna classe;
• small si crea con btn-sm;
• extrasmall si crea con btn-xs.

Il codice di esempio, di seguito riportato, ti mostrerà i pulsanti con le diverse dimensioni:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Con Bootstrap puoi creare anche pulsanti che occupano tutto lo spazio in larghezza del contenitore. Questi pulsanti sono chiamati Block Level Button e si creano con la classe btn-block in questo modo:

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Per concludere la nostra panoramica sulla componente Button di Bootstrap, vediamo come fare per modificarne lo stato.

Aggiungendo la classe active il nostro pulsante apparirà premuto, mentre con la classe disabled il pulsante non sarà cliccabile. Un esempio ti aiuterà a comprendere meglio:

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

Abbiamo concluso questa panoramica su Bootstrap Button. Abbiamo visto come assegnare uno stile predefinito ai nostri pulsanti e come modificare lo stato e le dimensioni.

Nei prossimi articoli vedremo gli altri componenti utili di Bootstrap da usare per le nostre interfacce.

Per qualsiasi informazione o chiarimento non esitare a contattarci attraverso la nostra pagina Facebook o via email.

Articolo successivo -> Bootstrap Icons, come aggiungere icone al nostro sito

Come personalizzare un Bootstrap (hamburger) menu <- Articolo precedente