En este artículo, aprenderemos las etiquetas e insignias de Bootstrap y su implementación. Bootstrap es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Las etiquetas e insignias de Bootstrap se utilizan para especificar la información adicional. las etiquetas brindan información adicional sobre el enlace o el texto.
Etiquetas: la clase ‘ .label’ de Bootstrap es una clase predefinida que proporciona detalles adicionales importantes relacionados con enlaces o texto en páginas web, como advertencias, conteos, actualizaciones, alertas y sugerencias, etc. en un formato diferente. & también agrega estilos al contenido de la página web.
Sintaxis:
<span class="label label-primary">Content</span>
Tipos: Los siguientes son los 6 tipos de etiquetas disponibles en Bootstrap:
- label-default : como sugiere el nombre, esta es la etiqueta predeterminada utilizada, cuando no se utiliza ninguna otra etiqueta para un elemento.
- label-primary : esta etiqueta se usa para representar algunas etiquetas importantes agregando el color azul a un elemento.
- label-success : esta etiqueta se usa para representar el éxito o algunas etiquetas de acción positiva agregando el color verde a un elemento.
- label-info: Esta etiqueta se utiliza para indicar una etiqueta informativa añadiendo el color azul claro a un elemento.
- label-warning : Esta etiqueta se utiliza para indicar una etiqueta de alerta o acción negativa añadiendo el color amarillo a un elemento.
- label-danger : Esta etiqueta se usa para indicar peligro o etiqueta de acción negativa agregando el color rojo a un elemento.
Enfoque: Implementaremos la etiqueta en el siguiente método:
- Incluya Bootstrap CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- Agregue la etiqueta <div> en el cuerpo HTML con el contenedor de clase.
- Declare la etiqueta <span> con la clase .label en el cuerpo html.
- Agregue diferentes etiquetas, como .label-success, .label-primary, .label-danger, clases para agregar color de fondo a las etiquetas.
Ejemplo 1: Este ejemplo ilustra la implementación de etiquetas.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Label Example</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head> <body> <div class="container"> <h2>Bootstrap Label Example</h2> <h6>GeeksForGeeks <span class="label label-success">New</span> </h6> <h5>GeeksForGeeks <span class="label label-primary">New</span> </h5> <h4>GeeksForGeeks <span class="label label-success">New</span> </h4> <h3>GeeksForGeeks <span class="label label-warning">New</span> </h3> <h2>GeeksForGeeks <span class="label label-danger">New</span> </h2> <h1>GeeksForGeeks <span class="label label-default">New</span> </h1> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustra etiquetas con diferentes clases contextuales predefinidas.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> </head> <body> <div class="container"> <h2>Bootstrap Label Classes</h2> <span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span> <span class="label label-info">Info Label</span> </div> </body> </html>
Producción:
Insignias: Las insignias son componentes simples y básicos que se utilizan para mostrar un indicador o contar un número. Esto es muy útil para fines de conteo de correo y alertas, entre otras cosas. Las insignias son idénticas a las etiquetas, con la excepción de que tienen esquinas más redondeadas. Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de tamaños de fuente relativos y unidades em. Estos se pueden usar usando una clase ‘.badge’ predefinida . Consulte el artículo Insignias de Bootstrap-5 para obtener más detalles.
Sintaxis:
<div class="badge bg-type"> Contents... <div>
Tipos: Los siguientes son los 8 tipos de fondos disponibles en Bootstrap 5.
- bg-primary: Se utiliza para agregar un fondo de color azul al elemento que resalta la importancia del elemento.
- bg-info: se utiliza para representar alguna información agregando un color de fondo azul claro a un elemento.
- bg-success: Se utiliza para representar el éxito o una acción positiva utilizando el color de fondo verde de un elemento.
- bg-danger : Se utiliza para indicar el peligro o acción negativa utilizando el color rojo de fondo de un elemento.
- bg-warning : Se utiliza para indicar la alerta o la acción negativa utilizando el color de fondo amarillo a un elemento.
- bg-secundario: Se utiliza para representar la acción no informativa o secundaria mediante el uso del color gris de fondo de un elemento.
- bg-light : Se utiliza para representar el color de fondo transparente a un elemento.
- bg-dark : Se utiliza para representar el color de fondo gris oscuro de un elemento.
Enfoque: Implementaremos las insignias en el siguiente método:
- Incluya Bootstrap CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- Agregue la etiqueta <div> en el cuerpo HTML con el contenedor de clase.
- Agregue <span> con insignia de clase en la etiqueta <button>.
Nota: También puede agregar enlaces a otros sitios web adjuntos a las insignias usando la etiqueta <a> que se abre cuando se hace clic en el botón.
Ejemplo 1: este ejemplo ilustra insignias dentro del botón.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head> <body> <div class="container"> <h2>Bootstrap Badge Example</h2> <button type="button" class="btn btn-danger"> Danger <span class="badge">10</span> </button> <button type="button" class="btn btn-success"> Success <span class="badge">12</span> </button> <button type="button" class="btn btn-warning"> Warning <span class="badge">20</span> </button> <button type="button" class="btn btn-primary"> Warning <span class="badge">25</span> </button> <button type="button" class="btn btn-info"> Warning <span class="badge">6</span> </button> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo ilustra insignias con enlaces a otros sitios web y también usó las ‘insignias de píldora’ para hacer que la esquina fuera más redondeada como una píldora.
HTML
<!DOCTYPE html> <head> <title>Pill badge example</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" /> </head> <body> <div class="container"> <h4 class="text-success"> Badges with link to other websites. </h4> <a href="https://www.geeksforgeeks.org/"> <button type="button" class="btn btn-primary"> GeeksForGeeks <span class= "badge badge-pill badge-light">1</span> </button> </a> <a href= "https://www.geeksforgeeks.org/web-development/?ref=shm"> <button type="button" class="btn btn-default"> Web-development <span class= "badge badge-pill badge-info">8</span> </button> </a> <a href= "https://www.geeksforgeeks.org/machine-learning/?ref=shm"> <button type="button" class="btn btn-info"> Machine-learning <span class= "badge badge-pill badge-danger">6</span> </button> </a> <a href= "https://www.geeksforgeeks.org/data-structures/?ref=shm"> <button type="button" class="btn btn-success"> Data-structures <span class= "badge badge-pill badge-warning">2</span> </button> </a> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- Firefox
- explorador de Internet
- Borde de Microsoft
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA