Bottoni

Usa gli stili dei pulsanti personalizzati di Bootstrap per le azioni in moduli, finestre di dialogo e altro con il supporto per più dimensioni, stati e altro ancora.

Esempi

Bootstrap include diversi stili di pulsanti predefiniti, ognuno con il proprio scopo semantico, con alcuni extra aggiunti per un maggiore controllo.

<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>

Disabilita il ritorno a capo del testo

Se non vuoi che il testo del pulsante vada a capo, puoi aggiungere la .text-nowrapclasse al pulsante. In Sass, puoi impostare $btn-white-space: nowrapdi disabilitare il ritorno a capo del testo per ogni pulsante.

Etichette a bottone

Le .btnclassi sono progettate per essere utilizzate con l' <button>elemento. Tuttavia, puoi anche usare queste classi su <a>o <input>elementi (sebbene alcuni browser possano applicare un rendering leggermente diverso).

Quando si utilizzano classi di pulsanti su <a>elementi che vengono utilizzati per attivare funzionalità in-page (come la compressione del contenuto), piuttosto che collegarsi a nuove pagine o sezioni all'interno della pagina corrente, questi collegamenti dovrebbero essere forniti role="button"per trasmettere in modo appropriato il loro scopo a tecnologie assistive come lettori di schermo.

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

Bottoni di contorno

Hai bisogno di un pulsante, ma non dei forti colori di sfondo che portano? Sostituisci le classi di modifica predefinite con .btn-outline-*quelle per rimuovere tutte le immagini e i colori di sfondo su qualsiasi pulsante.

<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>

Taglie

Ti piacciono i pulsanti più grandi o più piccoli? Aggiungi .btn-lgo .btn-smper dimensioni aggiuntive.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Crea pulsanti a livello di blocco, quelli che si estendono per l'intera larghezza di un genitore, aggiungendo .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Stato attivo

I pulsanti appariranno premuti quando sono attivi con uno sfondo più scuro, un bordo più scuro e, quando le ombre sono abilitate, un'ombra interna. Non è necessario aggiungere una classe a <button>s poiché usano una pseudo-class . Tuttavia, puoi comunque forzare lo stesso aspetto attivo con .active(e includere l' aria-pressed=“true”attributo) se devi replicare lo stato a livello di codice.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Stato disabile

Rendi inattivi i pulsanti aggiungendo l' disabledattributo booleano a qualsiasi <button>elemento.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

I pulsanti disabilitati che utilizzano l' <a>elemento si comportano in modo leggermente diverso:

• <a>s non supportano l' disabledattributo, quindi è necessario aggiungere la .disabledclasse per farlo apparire visivamente disabilitato.
• Sono inclusi alcuni stili futuribili per disabilitare tutto pointer-eventssui pulsanti di ancoraggio. Nei browser che supportano tale proprietà, non vedrai affatto il cursore disabilitato.
• I pulsanti disabilitati che utilizzano <a>dovrebbero includere l' aria-disabled="true"attributo per indicare lo stato dell'elemento alle tecnologie assistive.
• I pulsanti disabilitati che utilizzano <a> non devono includere l' hrefattributo.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Avvertenza sulla funzionalità di collegamento

Per coprire i casi in cui è necessario mantenere l' hrefattributo su un collegamento disabilitato, la .disabledclasse utilizza pointer-events: noneper provare a disabilitare la funzionalità di collegamento di <a>s. Nota che questa proprietà CSS non è ancora standardizzata per HTML, ma tutti i browser moderni la supportano. Inoltre, anche nei browser che supportano pointer-events: none, la navigazione da tastiera rimane inalterata, il che significa che gli utenti vedenti della tastiera e gli utenti di tecnologie assistive potranno comunque attivare questi collegamenti. Quindi, per sicurezza, oltre a aria-disabled="true", includi anche un tabindex="-1"attributo su questi collegamenti per impedire loro di ricevere lo stato attivo della tastiera e utilizza JavaScript personalizzato per disabilitare del tutto la loro funzionalità.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Plugin pulsante

Fai di più con i pulsanti. Controlla gli stati dei pulsanti o crea gruppi di pulsanti per più componenti come le barre degli strumenti.

Commuta gli stati

Aggiungi data-toggle="button"per cambiare lo stato di un pulsante active. Se stai preselezionando un pulsante, devi aggiungere manualmente la .activeclasse e aria-pressed="true" il file <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Casella di controllo e pulsanti di opzione

Gli stili di Bootstrap .buttonpossono essere applicati ad altri elementi, come <label>s, per fornire checkbox o pulsanti in stile radio. Aggiungi data-toggle="buttons"a un .btn-groupcontenitore quei pulsanti modificati per abilitare il loro comportamento di attivazione/disattivazione tramite JavaScript e aggiungi .btn-group-toggleper definire lo stile delle <input>s all'interno dei tuoi pulsanti. Si noti che è possibile creare pulsanti alimentati a input singolo o gruppi di essi.

Lo stato selezionato per questi pulsanti viene aggiornato solo tramite l' clickevento sul pulsante. Se utilizzi un altro metodo per aggiornare l'input, ad esempio con <input type="reset">o applicando manualmente la proprietà dell'input, dovrai checkedattivare manualmente..active<label>

Tieni presente che i pulsanti preselezionati richiedono di aggiungere manualmente la .activeclasse all'input <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Metodi