98 lines
2.8 KiB
Markdown
98 lines
2.8 KiB
Markdown
---
|
|
title: Buttons
|
|
localeTitle: Botones
|
|
---
|
|
## Botones
|
|
|
|
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.
|
|
|
|
#### Cómo utilizar:
|
|
|
|
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.
|
|
|
|
**Ejemplo de código:**
|
|
|
|
`<button type="button" class="btn btn-primary">Primario</button>`
|
|
|
|
Primario
|
|
|
|
También puede usar los botones de Bootstrap con los elementos `<a>` e `<input>` como se muestra en los ejemplos a continuación.
|
|
|
|
`<a class="btn btn-primary" href="#" role="button">Este botón es un enlace.</a>`
|
|
|
|
[Este botón es un enlace.](#)
|
|
|
|
`<input class="btn btn-primary" type="submit" value="Submit">`
|
|
|
|
#### Lista de clases de botones de Bootstrap:
|
|
|
|
Esta es una lista de las clases CSS que Bootstrap proporciona para los botones.
|
|
|
|
`.btn` Este es el botón básico de Bootstrap.
|
|
|
|
Básico
|
|
|
|
`.btn-default` Este es el botón predeterminado de Bootstrap.
|
|
|
|
Predeterminado
|
|
|
|
`.btn-primary` Este es el botón primario de Bootstrap.
|
|
|
|
Primario
|
|
|
|
`.btn-success` Este es el botón de éxito de Bootstrap.
|
|
|
|
Éxito
|
|
|
|
`.btn-info` Este es el botón de información de Bootstrap.
|
|
|
|
Información
|
|
|
|
`.btn-warning` Este es el botón de advertencia de Bootstrap.
|
|
|
|
Advertencia
|
|
|
|
`.btn-danger` Este es el botón de peligro de Bootstrap.
|
|
|
|
Peligro
|
|
|
|
`.btn-link` Este es el botón de enlace de Bootstrap.
|
|
|
|
Enlace
|
|
|
|
`.btn-light` Este es el botón claro de Bootstrap.
|
|
|
|
Claro
|
|
|
|
#### Tamaños de botones de Bootstrap:
|
|
|
|
Esta es una lista de las clases de CSS para diferentes tamaños de botones.
|
|
|
|
`.btn-lg` Este es el botón grande de Bootstrap.
|
|
|
|
Grande
|
|
|
|
`.btn-sm` Este es el botón pequeño de Bootstrap.
|
|
|
|
Pequeño
|
|
|
|
`.btn-xs` Este es el botón extra pequeño de Bootstrap.
|
|
|
|
Extra Pequeño
|
|
|
|
#### Botones delineados de Bootstrap:
|
|
|
|
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:
|
|
|
|
`<button type="button" class="btn btn-outline-primary">Primario</button>`
|
|
|
|
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/)
|
|
* [Bootstrap Empezar](/articles/bootstrap/bootstrap-get-started)
|