Bootstrap 4 pulsanti
Stili dei pulsanti
Bootstrap 4 fornisce diversi stili di pulsanti:
Esempio
<button type="button" class="btn">Basic</button>
<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-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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Le classi di pulsanti possono essere utilizzate su <a>, <button>, o
<input>elementi:
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. Nella vita reale dovrebbe ovviamente essere un vero URL alla pagina "Cerca".
Contorno pulsante
Bootstrap 4 fornisce otto pulsanti con contorno/bordi:
Esempio
<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-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Dimensioni dei bottoni
Usa la .btn-lgclasse per i pulsanti grandi o la .btn-smclasse per i pulsanti piccoli:
Esempio
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Pulsanti a livello di blocco
Aggiungi classe .btn-blockper creare un pulsante a livello di blocco che copre l'intera larghezza dell'elemento padre.
Esempio
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</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 l' disabledattributo rende un pulsante non cliccabile. Si noti che gli elementi <a> non supportano l'attributo disabilitato e devono quindi utilizzare la .disabledclasse per farlo apparire visivamente disabilitato.
Esempio
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Pulsanti di rotazione
Puoi anche aggiungere "filatori" a un pulsante, di cui imparerai di più nel nostro Tutorial per filatori BS4 :
Esempio
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>