Bottoni

Aduprate i stili di buttone persunalizati di Bootstrap per l'azzioni in forme, dialoghi è più cù supportu per parechje dimensioni, stati è più.

Esempii

Bootstrap include parechji stili di buttone predefiniti, ognuna serve u so propiu scopu semanticu, cù uni pochi di extra lanciati per più cuntrollu.

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

Disattivate l'imballaggio di testu

Se ùn vulete micca chì u testu di u buttone chjappà, pudete aghjunghje a .text-nowrapclassa à u buttone. In Sass, pudete stabilisce $btn-white-space: nowrapper disattivà l'imballaggio di testu per ogni buttone.

Tag di buttone

I .btnclassi sò pensati per esse usatu cù l' <button>elementu. Tuttavia, pudete puru aduprà sti classi <a>o <input>elementi (ancu se certi navigatori ponu applicà un rendering ligeramente sfarente).

Quandu si usanu classi di buttone nantu à <a>elementi chì sò usati per attivà a funziunalità in-pagina (cum'è u cuntenutu colapsatu), piuttostu cà di ligà à e novi pagine o sezioni in a pagina attuale, sti ligami devenu esse datu role="button"per trasmette in modu adattatu u so scopu à e tecnulugia di assistenza cum'è lettori di schermu.

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

Contornu i buttoni

Avete bisognu di un buttone, ma micca i culori di fondu forti chì portanu? Sustituisci i classi di modificatori predeterminati cù .btn-outline-*quelli per sguassà tutte l'imaghjini di fondo è i culori nantu à qualsiasi buttone.

<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

Vulete i buttoni più grande o più chjucu? Aggiungi .btn-lgo .btn-smper dimensioni supplementari.

<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 i buttoni di livellu di bloccu - quelli chì spannu tutta a larghezza di un genitore - aghjunghjendu .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>

Statu attivu

I buttoni appariranu pressati quandu sò attivi cù un fondo più scuru, un cunfini più scuru, è, quandu l'ombre sò attivate, una ombra inserita. Ùn ci hè bisognu di aghjunghje una classa à <button>s chì usanu una pseudo-classe . Tuttavia, pudete sempre furzà u listessu aspettu attivu cù .active(è include l' aria-pressed=“true”attributu) duvete bisognu di riplicà u statu in modu programmaticu.

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

Statu disattivatu

Fate chì i buttoni parenu inattivi aghjunghjendu l' disabledattributu booleanu à qualsiasi <button>elementu.

<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 buttoni disabilitati chì utilizanu l' <a>elementu si comportanu un pocu diffirenti:

• <a>s ùn sustene micca l' disabledattributu, cusì duvete aghjunghje a .disabledclassa per fà vede visualmente disattivata.
• Certi stili futuri sò inclusi per disattivà tutti pointer-eventsi buttuni di l'ancora. In i navigatori chì supportanu quella pruprietà, ùn vedete micca u cursore disattivatu.
• L'usu di i buttoni disabilitati <a>deve include l' aria-disabled="true"attributu per indicà u statu di l'elementu à e tecnulugia assistive.
• L'usu di i buttoni disabilitati <a> ùn deve micca include l' hrefattributu.

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

Avvisu di funziunalità di ligame

Per copre i casi induve duvete mantene l' hrefattributu nantu à un ligame disattivatu, a .disabledclassa usa pointer-events: noneper pruvà à disattivà a funziunalità di ligame di <a>s. Nota chì sta pruprietà CSS ùn hè ancu standardizzata per HTML, ma tutti i navigatori muderni supportanu. Inoltre, ancu in i navigatori chì supportanu pointer-events: none, a navigazione di u teclatu ùn hè micca affettata, vale à dì chì l'utilizatori di u teclatu di vista è l'utilizatori di tecnulugii assistivi seranu sempre capaci di attivà sti ligami. Cusì per esse sicuru, in più di aria-disabled="true", include ancu un tabindex="-1"attributu nantu à questi ligami per impediscenu di riceve u focus di u teclatu, è utilizate JavaScript persunalizatu per disattivà a so funziunalità.

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

Fate più cù i buttoni. Cuntrolla i stati di u buttone o crea gruppi di buttoni per più cumpunenti cum'è toolbars.

Toggle stati

Aghjunghjite data-toggle="button"per cambià u statu di un buttone active. Sè vo site pre-toggling un buttone, duvete aghjunghje manualmente a .activeclassa è aria-pressed="true" à u <button>.

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

Checkbox è i buttoni di radiu

Stili di Bootstrap .buttonponu esse appiicati à altri elementi, cum'è <label>s, per furnisce una casella di spunta o un buttone di stile di radiu. Aghjunghjite data-toggle="buttons"à un .btn-groupchì cuntene quelli buttuni mudificati per attivà u so cumpurtamentu di toggling via JavaScript è aghjunghje .btn-group-toggleà stilà i <input>s in i vostri buttoni. Innota chì pudete creà unicu buttone di input-powered o gruppi di elli.

U statu verificatu per questi buttoni hè aghjurnatu solu via clickavvenimentu nantu à u buttone. Se aduprate un altru metudu per aghjurnà l'input - per esempiu, cù <input type="reset">o applicà manualmente a checkedpruprietà di l'input - vi tuccherà à attivà .activemanualmente <label>.

Nota chì i buttuni pre-verificati necessitanu di aghjunghje manualmente a .activeclasse à l'input's <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>

I metudi