Bootstrap 5 Bottone

Stile pulsante

Bootstrap 5 offre diversi stili di pulsanti:

Esempio

<button type="button" class="btn">Base</button>
<button type="button" class="btn btn-primary">Principale</button>
<button type="button" class="btn btn-secondary">Secondario</button>
<button type="button" class="btn btn-success">Successo</button>
<button type="button" class="btn btn-info">Informazione</button>
<button type="button" class="btn btn-warning">Avviso</button>
<button type="button" class="btn btn-danger">Pericolo</button>
<button type="button" class="btn btn-dark">Scuro</button>
<button type="button" class="btn btn-light">Chiaro</button>
<button type="button" class="btn btn-link">Link</button>

Prova personalmente

La classe di pulsante può essere utilizzata per <a>,<button> o <input> Elemento:

Esempio

<a href="#" class="btn btn-success">Pulsante di link</a>
<button type="button" class="btn btn-success">Pulsante</button>
<input type="button" class="btn btn-success" value="Pulsante di input">
<input type="submit" class="btn btn-success" value="Pulsante di invio">
<input type="reset" class="btn btn-success" value="Pulsante di reset">

Prova personalmente

Perché scriviamo un # nel attributo href del link?

Poiché non abbiamo nessuna pagina collegabile e non vogliamo ricevere un messaggio "404", useremo # come link. Nel mondo reale, dovrebbe essere l'URL reale della pagina di ricerca.

Contorni dei pulsanti

Bootstrap 5 offre anche otto pulsanti contorni/contorni.

Metti il mouse sopra a loro, per vedere l'effetto "hover" aggiuntivo:

Esempio

<button type="button" class="btn btn-outline-primary">Principale</button>
<button type="button" class="btn btn-outline-secondary">Secondario</button>
<button type="button" class="btn btn-outline-success">Successo</button>
<button type="button" class="btn btn-outline-info">Informazione</button>
<button type="button" class="btn btn-outline-warning">Avviso</button>
<button type="button" class="btn btn-outline-danger">Pericoloso</button>
<button type="button" class="btn btn-outline-dark">Scuro</button>
<button type="button" class="btn btn-outline-light text-dark">Chiaro</button>

Prova personalmente

Dimensioni dei pulsanti

Utilizzata per i pulsanti grandi .btn-lg Classe, utilizzata per i pulsanti piccoli .btn-sm Classe:

Esempio

<button type="button" class="btn btn-primary btn-lg">Grande</button>
<button type="button" class="btn btn-primary">Predefinito</button>
<button type="button" class="btn btn-primary btn-sm">Piccolo</button>

Prova personalmente

Pulsanti bloccanti

Per creare pulsanti bloccanti che coprono tutta la larghezza dell'elemento genitore, utilizza .d-grid Classe "helper":

Esempio

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Pulsante a larghezza piena</button>
</div>

Prova personalmente

Se hai molti pulsanti bloccanti, puoi usare .gap-* La classe controlla lo spazio tra di loro:

Esempio

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Pulsante a larghezza piena</button>
  <button type="button" class="btn btn-primary btn-block">Pulsante a larghezza piena</button>
  <button type="button" class="btn btn-primary btn-block">Pulsante a larghezza piena</button>
</div>

Prova personalmente

Pulsante attivo/disabilitato

Il pulsante può essere impostato come stato attivo (visualizzato come premuto) o disabilitato (non cliccabile):

la classe .active per rendere il pulsante visivamente premuto, mentre disabled L'attributo rende il pulsante non cliccabile. Nota che l'elemento <a> non supporta l'attributo disabled, quindi è necessario utilizzare .disabled La classe lo rende visivamente disabilitato.

Esempio

<button type="button" class="btn btn-primary active">Primario Attivo</button>
<button type="button" class="btn btn-primary" disabled>Primario Disabilitato</button>
<a href="#" class="btn btn-primary disabled">Link Disabilitato</a>

Prova personalmente

Pulsante di caricamento

Puoi anche aggiungere "spinner" al pulsante, imparerai di più sui nostri tutorial di BS5 Spinner:

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>
  Caricamento...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Caricamento...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Caricamento...
</button>

Prova personalmente