Source

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>
Transmitir significado ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.

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.

Ligazón 
<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 presionados (cun ​​fondo máis escuro, bordo máis escuro e sombra inserida) cando estean activos. 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.

Ligazón principal Ligazó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 deben incluír o aria-disabled="true"atributo para indicar o estado do elemento ás tecnoloxías de asistencia.
Ligazón principal Ligazón 
<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>

A .disabledclase úsase pointer-events: nonepara tentar desactivar a función de ligazón de <a>s, pero esa propiedade CSS aínda non está estandarizada. 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, engade un tabindex="-1"atributo a estas ligazóns (para evitar que reciban o foco do teclado) e use JavaScript personalizado para desactivar a súa funcionalidade.

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" autocomplete="off">
  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 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étodos

Método Descrición
$().button('toggle') Alterna o estado push. Dálle ao botón a aparencia de que foi activado.
$().button('dispose') Destrúe o botón dun elemento.