Bottoni Bootstrap
Stili dei pulsanti
Bootstrap fornisce diversi stili di pulsanti:
Per ottenere gli stili dei pulsanti sopra, Bootstrap ha le seguenti classi:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
L'esempio seguente mostra il codice per i diversi stili di pulsante:
Esempio
<button type="button" class="btn">Basic</button>
<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>
Le classi di pulsanti possono essere utilizzate su un elemento <a>, <button>o
:<input>
Esempio
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Perché mettiamo un # nell'attributo href del collegamento?
Poiché non abbiamo alcuna pagina a cui collegarlo e non vogliamo ricevere un messaggio "404", inseriamo # come collegamento nei nostri esempi. Dovrebbe essere un vero URL a una pagina specifica.
Dimensioni dei bottoni
Bootstrap offre quattro dimensioni dei pulsanti:
Le classi che definiscono le diverse dimensioni sono:
.btn-lg.btn-sm.btn-xs
L'esempio seguente mostra il codice per pulsanti di dimensioni diverse:
Esempio
<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>
Pulsanti a livello di blocco
Un pulsante a livello di blocco copre l'intera larghezza dell'elemento padre.
Aggiungi classe .btn-blockper creare un pulsante a livello di blocco:
Esempio
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Pulsanti attivi/disabilitati
Un pulsante può essere impostato su uno stato attivo (appare premuto) o disabilitato (non cliccabile):
La classe .activefa apparire un pulsante premuto e la classe
.disabled
rende un pulsante non cliccabile:
Esempio
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Riferimento completo del pulsante Bootstrap
Per un riferimento completo di tutte le classi di pulsanti, vai al nostro completo Bootstrap Button Reference .