2018-10-12 19:37:13 +00:00
---
title: Buttons
localeTitle: Botones
---
## Botones
2018-11-20 21:55:13 +00:00
El framework de Bootstrap le proporciona varias opciones de estilo para los botones. Estos estilos le ayudan a proporcionar una representación visual al usuario de lo que puede hacer el botón.
2018-10-12 19:37:13 +00:00
#### Cómo utilizar:
2018-11-20 21:55:13 +00:00
Para usar los botones de Bootstrap, siga los mismos pasos que haría para crear un botón en HTML, excepto que también aplica la clase de CSS correspondiente al botón. A continuación se proporciona un ejemplo de código.
2018-10-12 19:37:13 +00:00
**Ejemplo de código:**
2018-11-20 21:55:13 +00:00
`<button type="button" class="btn btn-primary">Primario</button>`
2018-10-12 19:37:13 +00:00
Primario
2018-11-20 21:55:13 +00:00
También puede usar los botones de Bootstrap con los elementos `<a>` e `<input>` como se muestra en los ejemplos a continuación.
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
`<a class="btn btn-primary" href="#" role="button">Este botón es un enlace.</a>`
2018-10-12 19:37:13 +00:00
[Este botón es un enlace. ](# )
`<input class="btn btn-primary" type="submit" value="Submit">`
2018-11-20 21:55:13 +00:00
#### Lista de clases de botones de Bootstrap:
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
Esta es una lista de las clases CSS que Bootstrap proporciona para los botones.
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
`.btn` Este es el botón básico de Bootstrap.
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
Básico
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
`.btn-default` Este es el botón predeterminado de Bootstrap.
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
Predeterminado
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
`.btn-primary` Este es el botón primario de Bootstrap.
2018-10-12 19:37:13 +00:00
Primario
2018-11-20 21:55:13 +00:00
`.btn-success` Este es el botón de éxito de Bootstrap.
2018-10-12 19:37:13 +00:00
Éxito
2018-11-20 21:55:13 +00:00
`.btn-info` Este es el botón de información de Bootstrap.
2018-10-12 19:37:13 +00:00
Información
2018-11-20 21:55:13 +00:00
`.btn-warning` Este es el botón de advertencia de Bootstrap.
2018-10-12 19:37:13 +00:00
Advertencia
2018-11-20 21:55:13 +00:00
`.btn-danger` Este es el botón de peligro de Bootstrap.
2018-10-12 19:37:13 +00:00
Peligro
2018-11-20 21:55:13 +00:00
`.btn-link` Este es el botón de enlace de Bootstrap.
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
Enlace
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
`.btn-light` Este es el botón claro de Bootstrap.
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
Claro
2018-10-12 19:37:13 +00:00
#### Tamaños de botones de Bootstrap:
Esta es una lista de las clases de CSS para diferentes tamaños de botones.
2018-11-20 21:55:13 +00:00
`.btn-lg` Este es el botón grande de Bootstrap.
2018-10-12 19:37:13 +00:00
Grande
2018-11-20 21:55:13 +00:00
`.btn-sm` Este es el botón pequeño de Bootstrap.
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
Pequeño
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
`.btn-xs` Este es el botón extra pequeño de Bootstrap.
2018-10-12 19:37:13 +00:00
Extra Pequeño
2018-11-20 21:55:13 +00:00
#### Botones delineados de Bootstrap:
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
También es posible tener botones delineados en lugar de totalmente coloreados. Esto se logra colocando la palabra `outline` entre la clase de botón que desea. Un ejemplo de uso sería el siguiente:
2018-10-12 19:37:13 +00:00
2018-11-20 21:55:13 +00:00
`<button type="button" class="btn btn-outline-primary">Primario</button>`
2018-10-12 19:37:13 +00:00
Los botones descritos son una parte de Bootstrap desde la versión 4, asegúrese de estar usando la versión correcta si no puede hacer que funcionen.
_Nota: No incluya el punto en el atributo de clase HTML, ya que las clases con un punto solo se usan al ajustar las clases en CSS._
#### Más información:
* [Documentación de Bootstrap Buttons ](https://getbootstrap.com/docs/4.0/components/buttons/ )
* [Documentación de Bootstrap Button Group ](http://getbootstrap.com/docs/4.0/components/button-group/ )
2018-11-20 21:55:13 +00:00
* [Bootstrap Empezar ](/articles/bootstrap/bootstrap-get-started )