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.

Botones redondos

Agrega la clase .btn-round para crear botones perfectamente circulares. Esta clase mantiene una relación de aspecto 1:1 y aplica un border-radius del 50%. 


      <button type="button" class="btn btn-primary btn-round">
        <i class="icon-search"></i>
      </button>
      <button type="button" class="btn btn-secondary btn-round">
        <i class="icon-plus"></i>
      </button>
      <button type="button" class="btn btn-outline-danger btn-round">
        <i class="icon-close"></i>
      </button>
Uso con iconos

Los botones redondos están especialmente diseñados para contener iconos. Se recomienda usar iconos centrados dentro del botón para mantener una apariencia equilibrada.

Botón de salida para kiosco

Utiliza la clase .btn-kiosk-exit para crear un botón de salida consistente en todos los layouts del kiosco digital. Esta clase establece un ancho fijo y padding específico para mantener la uniformidad. 


      <button type="button" class="btn btn-primary btn-kiosk-exit font-weight-medium">
        Salir
      </button>