TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear botones en Bootstrap 5?

26

Los botones son uno de los elementos básicos de cualquier marco de interfaz de usuario. En nuestro otro artículo hemos visto muchos ejemplos de botones Bootstrap 3. En Bootstrap 4, hay cambios menores en las clases de botones para mejorar la experiencia del usuario. Por ejemplo, la clase de botón predeterminada ".btn-dafault" se cambiará a un botón secundario con la clase ".btn-secundaria" y la clase de botón extrapequeño ".btn-xs" se eliminará. No hay muchos cambios a los botones en Bootstrap 5. En este tutorial, exploremos más sobre la creación de diferentes tipos de botones con Bootstrap 5.

Conceptos básicos de los botones Bootstrap

Antes de crear botones, recuerde los siguientes puntos:

  • Para identificar cualquier elemento como botón, debe incluir la clase ".btn" como mínimo.
  • Las clases adicionales solo determinarán el estilo adicional del botón además de la clase ".btn".
  • La clase ".btn" se puede agregar a elementos HTML como
  • Necesita los archivos de script de Bootstrap solo para la sección "Complementos de Bootstrap" para crear un efecto de alternancia, otros botones simplemente funcionarán con el CSS. Consulte la plantilla de inicio de Bootstrap 5 para obtener más detalles.

Botones predeterminados básicos

Puede crear diferentes colores de botones usando clases de utilidad de fondo para la clase ".btn".

  • Primario: este es el botón principal o principal que se utiliza con el color azul.
  • Secundario: el botón de color blanco es un botón secundario o alternativo.
  • Éxito: botón verde utilizado para acciones positivas.
  • Información: botón azul claro que se utiliza para mostrar información.
  • Advertencia: botón amarillo utilizado para acciones de advertencia.
  • Peligro: botón rojo utilizado para acciones de error.
  • Light – Botón con color gris claro.
  • Oscuro – Botón con fondo oscuro.
  • Enlace: además de los colores de fondo, también puede crear un botón de enlace sin fondo.

El código del botón principal debería verse así

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button --> <button type="button" class="btn btn-primary">Primary</button> <!-- End of Button --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Como se explicó, la clase ".btn" identifica el elemento como un botón y la clase ".btn-primary" se usa para crear el botón con el color primario (azul). Del mismo modo, a continuación se proporcionan otros códigos de botones:

<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> <button type="button" class="btn btn-dark">Dark Button</button> <button type="button" class="btn btn-link">Link</button>

El último elemento es un botón de enlace que se verá como un enlace de texto en la pantalla, pero actuará como un botón cuando se haga clic en él o se coloque sobre él. Los botones predeterminados se verán a continuación en el navegador:

¿Cómo crear botones en Bootstrap 5?

Etiquetas de botón: uso de clases de botones con etiquetas diferentes

Las clases de botones se admiten en

Fuente de grabación: webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More