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>

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 premuts (amb un fons més fosc, una vora més fosca i una ombra inserida) quan estiguin actius. 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.
• Els botons desactivats haurien d'incloure l' aria-disabled="true"atribut per indicar l'estat de l'element a les tecnologies d'assistència.

<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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Mètodes