Botóns

Use os estilos de botón personalizados de Bootstrap para accións en formularios, diálogos e moito máis con compatibilidade con varios tamaños, estados e moito máis.

Exemplos

Bootstrap inclúe varios estilos de botóns predefinidos, cada un cumprindo o seu propio propósito semántico, con algúns extras para un maior 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 o ajuste de texto

Se non queres que o texto do botón se axuste, podes engadir a .text-nowrapclase ao botón. En Sass, pode configurar $btn-white-space: nowrappara desactivar o ajuste de texto para cada botón.

Etiquetas de botón

As .btnclases están deseñadas para ser usadas co <button>elemento. Non obstante, tamén pode usar estas clases en <a>ou <input>elementos (aínda que algúns navegadores poden aplicar unha representación lixeiramente diferente).

Cando se usan clases de botóns en <a>elementos que se usan para activar a funcionalidade da páxina (como o contido en colapso), en lugar de enlazar con novas páxinas ou seccións dentro da páxina actual, estas ligazóns deberían ter unha role="button"función para transmitir adecuadamente o seu propósito ás tecnoloxías de asistencia, como lectores 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">

Botóns de esquema

Necesitas un botón, pero non as cores de fondo fortes que traen? Substitúe as clases de modificadores predeterminadas por .btn-outline-*aquelas para eliminar todas as imaxes e cores de fondo en calquera botón.

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

Tallas

Queres botóns máis grandes ou pequenos? Engadir .btn-lgou .btn-smpara tamaños adicionais.

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

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

Estado activo

Os botóns aparecerán pulsados ​​cando estean activos cun fondo máis escuro, un bordo máis escuro e, cando as sombras están activadas, unha sombra inserida. Non é necesario engadir unha clase a <button>s xa que usan unha pseudoclase . Non obstante, aínda podes forzar a mesma aparición activa con .active(e incluír o aria-pressed=“true”atributo) se precisas replicar o estado mediante programación.

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

Estado desactivado

Fai que os botóns parezan inactivos engadindo o disabledatributo booleano a calquera <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>

Os botóns desactivados que usan o <a>elemento compórtanse un pouco diferente:

• <a>s non admiten o disabledatributo, polo que debes engadir a .disabledclase para que apareza visualmente desactivada.
• Inclúense algúns estilos para o futuro para desactivar todos pointer-eventsos botóns de ancoraxe. Nos navegadores que admiten esa propiedade, non verá o cursor desactivado en absoluto.
• Os botóns desactivados que se usan <a>deben incluír o aria-disabled="true"atributo para indicar o estado do elemento ás tecnoloxías de asistencia.
• Os botóns desactivados no uso <a> non deben incluír o hrefatributo.

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

Advertencia sobre a funcionalidade da ligazón

Para cubrir os casos nos que tes que manter o hrefatributo nunha ligazón desactivada, a .disabledclase usa pointer-events: nonepara tentar desactivar a función de ligazón de <a>s. Teña en conta que esta propiedade CSS aínda non está estandarizada para HTML, pero todos os navegadores modernos a admiten. Ademais, mesmo nos navegadores que admiten pointer-events: none, a navegación do teclado non se ve afectada, o que significa que os usuarios de teclado videntes e os usuarios de tecnoloxías de asistencia aínda poderán activar estas ligazóns. Polo tanto, para estar seguro, ademais de aria-disabled="true", inclúe tamén un tabindex="-1"atributo nestas ligazóns para evitar que reciban o foco do teclado e use JavaScript personalizado para desactivar a súa funcionalidade por completo.

<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 de botón

Fai máis cos botóns. Controla os estados dos botóns ou crea grupos de botóns para máis compoñentes como barras de ferramentas.

Alterna os estados

Engadir data-toggle="button"para cambiar o estado dun botón active. Se estás a cambiar previamente un botón, debes engadir manualmente a .activeclase e aria-pressed="true" ao <button>.

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

Caixa de verificación e botóns de opción

Os estilos de Bootstrap .buttonpódense aplicar a outros elementos, como <label>s, para fornecer a opción de cambiar a caixa de verificación ou o botón de estilo de radio. Engade data-toggle="buttons"a un .btn-groupque contén os botóns modificados para activar o seu comportamento de alternancia a través de JavaScript e engade .btn-group-togglepara darlle estilo ás <input>s dentro dos teus botóns. Teña en conta que pode crear botóns únicos alimentados por entrada ou grupos deles.

O estado marcado destes botóns só se actualiza mediante un clickevento no botón. Se usas outro método para actualizar a entrada, por exemplo, con <input type="reset">ou aplicando manualmente a checkedpropiedade da entrada, terás que activar a opción .activemanualmente <label>.

Teña en conta que os botóns marcados previamente requiren que engadas manualmente a .activeclase á 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étodos