Botons

Utilitzeu els estils de botons personalitzats de Bootstrap per a accions en formularis, diàlegs i més amb suport per a diverses mides, estats i molt més.

Exemples

Bootstrap inclou diversos estils de botons predefinits, cadascun amb el seu propi propòsit semàntic, amb alguns extres incorporats per a més control.

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

Desactiva l'ajustament del text

Si no voleu que el text del botó s'ajusti, podeu afegir la .text-nowrapclasse al botó. A Sass, podeu configurar $btn-white-space: nowrapper desactivar l'ajustament de text per a cada botó.

Etiquetes de botons

Les .btnclasses estan dissenyades per ser utilitzades amb l' <button>element. Tanmateix, també podeu utilitzar aquestes classes en <a>o <input>elements (tot i que alguns navegadors poden aplicar una representació lleugerament diferent).

Quan s'utilitzen classes de botons en <a>elements que s'utilitzen per activar la funcionalitat de la pàgina (com ara col·lapsar el contingut), en lloc d'enllaçar a pàgines noves o seccions dins de la pàgina actual, aquests enllaços s'han de donar una role="button"opció per transmetre adequadament el seu propòsit a tecnologies d'assistència com ara lectors de pantalla.

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

Botons d'esquema

Necessites un botó, però no els intensos colors de fons que aporten? Substituïu les classes modificadores predeterminades per les .btn-outline-*que permeten eliminar totes les imatges i colors de fons de qualsevol botó.

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

Mides

Voleu botons més grans o més petits? Afegiu .btn-lgo .btn-smper a mides addicionals.

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

Creeu botons de nivell de bloc, els que abasten tota l'amplada d'un pare, afegint .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>

Estat actiu

Els botons apareixeran pressionats quan estiguin actius amb un fons més fosc, una vora més fosca i, quan les ombres estiguin habilitades, una ombra inserida. No cal afegir una classe a <button>s ja que utilitzen una pseudo-classe . Tanmateix, encara podeu forçar la mateixa aparença activa amb .active(i incloure l' aria-pressed=“true”atribut) si necessiteu replicar l'estat programadament.

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

Estat desactivat

Feu que els botons semblin inactius afegint l' disabledatribut booleà a qualsevol <button>element.

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

Els botons desactivats que utilitzen l' <a>element es comporten una mica diferent:

• <a>s no admeten l' disabledatribut, de manera que heu d'afegir la .disabledclasse perquè sembli visualment desactivada.
• S'inclouen alguns estils futurs per desactivar tots pointer-eventsels botons d'ancoratge. Als navegadors que admeten aquesta propietat, no veureu en absolut el cursor desactivat.
• L' ús dels botons desactivats <a>hauria d'incloure l' aria-disabled="true"atribut per indicar l'estat de l'element a les tecnologies d'assistència.
• Els botons desactivats <a> no haurien d' incloure l' hrefatribut.

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

Advertència sobre la funcionalitat de l'enllaç

Per cobrir casos en què heu de mantenir l' hrefatribut en un enllaç desactivat, la .disabledclasse fa servir pointer-events: noneper intentar desactivar la funcionalitat d'enllaç de <a>s. Tingueu en compte que aquesta propietat CSS encara no està estandarditzada per a HTML, però tots els navegadors moderns ho admeten. A més, fins i tot als navegadors que admeten pointer-events: none, la navegació amb el teclat no es veu afectada, el que significa que els usuaris de teclat vidents i els usuaris de tecnologies d'assistència encara podran activar aquests enllaços. Així, per estar segur, a més de aria-disabled="true", també inclou un tabindex="-1"atribut en aquests enllaços per evitar que rebin el focus del teclat i utilitzeu JavaScript personalitzat per desactivar-ne la funcionalitat.

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

Connector de botons

Fes més amb els botons. Controla els estats dels botons o crea grups de botons per a més components com ara barres d'eines.

Commuta els estats

Afegeix data-toggle="button"per canviar l'estat d'un botó active. Si esteu activant un botó prèviament, heu d'afegir manualment la .activeclasse i aria-pressed="true" al fitxer <button>.

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

Casilla de verificació i botons d'opció

Els estils de Bootstrap .buttones poden aplicar a altres elements, com ara <label>s, per proporcionar una caixa de verificació o un botó d'estil de ràdio. Afegiu data-toggle="buttons"a un .btn-groupque conté els botons modificats per activar el seu comportament de commutació mitjançant JavaScript i afegiu -hi .btn-group-toggleper estilitzar les <input>s dels vostres botons. Tingueu en compte que podeu crear botons d'entrada únics o grups d'ells.

L'estat marcat d'aquests botons només s'actualitza mitjançant clickun esdeveniment al botó. Si utilitzeu un altre mètode per actualitzar l'entrada, per exemple, amb <input type="reset">o aplicant manualment la checkedpropietat de l'entrada, haureu d'activar .active-la <label>manualment.

Tingueu en compte que els botons marcats prèviament requereixen que afegiu manualment la .activeclasse a l'entrada <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>

Mètodes