Botones

Use los estilos de botones personalizados de Bootstrap para acciones en formularios, cuadros de diálogo y más con soporte para múltiples tamaños, estados y más.

Ejemplos

Bootstrap incluye varios estilos de botones predefinidos, cada uno de los cuales tiene su propio propósito semántico, con algunos extras para un mayor 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-info">info</button>
        <button type="button" class="btn btn-warning">warning</button>
        <button type="button" class="btn btn-danger">danger</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-gray">gray</button>
        <button type="button" class="btn btn-tertiary">tertiary</button>
Transmitir significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-only clase.

Deshabilitar el ajuste de texto

Si no desea que el texto del botón se ajuste, puede agregar la .text-nowrap clase al botón. En Sass, puede configurar $btn-white-space: nowrap para deshabilitar el ajuste de texto para cada botón.

Etiquetas de botón

Las clases .btn están diseñadas para usarse con el <button> elemento. Sin embargo, también puede usar estas clases en elementos <a> o <input> (aunque algunos navegadores pueden aplicar una representación ligeramente diferente).

Cuando se utilizan clases de botones en <a> elementos que se utilizan para activar la funcionalidad en la página (como el contenido que se contrae), en lugar de vincular a nuevas páginas o secciones dentro de la página actual, estos vínculos deben tener una role="button" para transmitir adecuadamente su propósito a tecnologías de asistencia como lectores de pantalla.

Link 

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

Botones de contorno

¿Necesitas un botón, pero no los colores de fondo que traen? Reemplace las clases de modificadores predeterminadas con las .btn-outline-* que eliminan todas las imágenes y colores de fondo en cualquier 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-info">info</button>
      <button type="button" class="btn btn-outline-warning">warning</button>
      <button type="button" class="btn btn-outline-danger">danger</button>
      <button type="button" class="btn btn-outline-light">light</button>
      <button type="button" class="btn btn-outline-dark">dark</button>
      <button type="button" class="btn btn-outline-gray">gray</button>
      <button type="button" class="btn btn-outline-tertiary">tertiary</button>

Tamaños

¿Te apetecen botones más grandes o más pequeños? Agregue .btn-lg o .btn-sm para tamaños adicionales. 


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

Cree botones de nivel de bloque, los que abarcan todo el ancho de un padre, agregando .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

Los botones aparecerán presionados (con un fondo más oscuro, un borde más oscuro y una sombra insertada) cuando estén activos. No es necesario agregar una clase a <button> s, ya que usan una pseudoclase . Sin embargo, aún puede forzar la misma apariencia activa con .active (e incluir el aria-pressed="true" atributo) en caso de que necesite replicar el estado mediante programación.

Primary link Link 

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

Haga que los botones parezcan inactivos agregando el disabled atributo booleano a cualquier <button> elemento. 


    <button type="button" class="btn btn-outline-primary" disabled>primary</button>
    <button type="button" class="btn btn-outline-secondary" disabled>secondary</button>
    <button type="button" class="btn btn-outline-success" disabled>success</button>
    <button type="button" class="btn btn-outline-info" disabled>info</button>
    <button type="button" class="btn btn-outline-warning" disabled>warning</button>
    <button type="button" class="btn btn-outline-danger" disabled>danger</button>
    <button type="button" class="btn btn-outline-light" disabled>light</button>
    <button type="button" class="btn btn-outline-dark" disabled>dark</button>
    <button type="button" class="btn btn-outline-gray" disabled>gray</button>
    <button type="button" class="btn btn-outline-tertiary" disabled>tertiary</button>
    --
    <button type="button" class="btn btn-outline-primary" disabled>primary</button>
    <button type="button" class="btn btn-outline-secondary" disabled>secondary</button>
    <button type="button" class="btn btn-outline-success" disabled>success</button>
    <button type="button" class="btn btn-outline-info" disabled>info</button>
    <button type="button" class="btn btn-outline-warning" disabled>warning</button>
    <button type="button" class="btn btn-outline-danger" disabled>danger</button>
    <button type="button" class="btn btn-outline-light" disabled>light</button>
    <button type="button" class="btn btn-outline-dark" disabled>dark</button>
    <button type="button" class="btn btn-outline-gray" disabled>gray</button>
    <button type="button" class="btn btn-outline-tertiary" disabled>tertiary</button>

Los botones deshabilitados que usan el <a> elemento se comportan un poco diferente:

  • Los <a> no admiten el disabled atributo, por lo que debe agregar la .disabled clase para que aparezca visualmente deshabilitada.
  • Se incluyen algunos estilos para el futuro para deshabilitar todos los pointer-events botones de anclaje. En los navegadores que admiten esa propiedad, no verá el cursor deshabilitado en absoluto.
  • Los botones deshabilitados deben incluir el aria-disabled="true" atributo para indicar el estado del elemento a las tecnologías de asistencia.
Primary link Link 

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

La clase .disabled usa pointer-events: none para intentar deshabilitar la funcionalidad de enlace de <a> , pero esa propiedad CSS aún no está estandarizada. Además, incluso en los navegadores que sí lo admiten pointer-events: none , la navegación con el teclado no se ve afectada, lo que significa que los usuarios videntes del teclado y los usuarios de tecnologías de asistencia aún podrán activar estos enlaces. Entonces, para estar seguro, agregue un tabindex="-1" atributo en estos enlaces (para evitar que reciban el enfoque del teclado) y use JavaScript personalizado para deshabilitar su funcionalidad.

Complemento de botón

Haz más con los botones. Controle los estados de los botones o cree grupos de botones para más componentes como barras de herramientas.

Alternar estados

Agregar data-toggle="button" para alternar el estado active de un botón. Si está activando previamente un botón, debe agregar manualmente la clase .active y aria-pressed="true" al archivo <button>. 

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

Casilla de verificación y botones de opción

Los estilos .button de Bootstrap se pueden aplicar a otros elementos, como <label> , para proporcionar la alternancia de botones de casilla de verificación o estilo de radio. Agregue data-toggle="buttons" a un que .btn-group contenga esos botones modificados para habilitar su comportamiento de alternancia a través de JavaScript y agregue .btn-group-toggle para diseñar las <input> dentro de sus botones. Tenga en cuenta que puede crear botones de entrada única o grupos de ellos.

El estado marcado para estos botones solo se actualiza mediante un click evento en el botón. Si utiliza otro método para actualizar la entrada-por ejemplo, con <input type="reset"> o aplicando manualmente de la entrada checked necesidad propiedad-usted a alternar .active en el <label> manual.

Tenga en cuenta que los botones previamente marcados requieren que agregue manualmente la .active clase a la 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

Método Descripción
$().button('toggle') Alterna el estado de empuje. Da al botón la apariencia de que ha sido activado.
$().button('dispose') Destruye el botón de un elemento.