En este artículo, aprenderemos cómo hacer una lista de insignias que brinde la idea sobre la base de la prioridad de la lista. Los grupos de listas se utilizan para mostrar series de contenido. Podemos usar los Grupos de listas para mostrar una serie o lista de contenido de manera organizada y esto puede ser útil ya que podemos modificarlo según nuestras necesidades.
Las insignias son la etiqueta de número que está asociada con el enlace para indicar la cantidad de elementos asociados con el enlace. Por ejemplo, el número de notificación se puede ver cuando se inicia sesión en un sitio web en particular que indica los números de nuevas notificaciones para ver al hacer clic en él. Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de tamaños de fuente relativos. Las insignias junto al grupo de listas nos ayudan a captar la atención de los espectadores para resaltar los puntos importantes en un grupo de listas. Ayuda a agregar vitalidad a los datos importantes en la serie dada.
Sintaxis:
<ul class="list-group">
<li class="list-group-item">
<span class="badge bg-type">Badge Content</span>
list-content
</li>
</ul>
Tipos: Los siguientes son los 8 tipos de fondos disponibles en Bootstrap 5.
- bg-primario
- bg-secundario
- bg-éxito
- bg-peligro
- bg-advertencia
- bg-info
- bg-luz
- bg-oscuro
Comprenderemos el propósito de usar todos estos tipos de insignias a través de los ejemplos.
Ejemplo 1: Este ejemplo ilustra un grupo de lista básico con diferentes tipos de insignias. Estas insignias significan una emoción a través de sus colores de fondo, como éxito, peligro y neutralidad.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color: green; text-align: center;"> Geeksforgeeks </h1> <ul class="list-group"> <li class="list-group-item"> <span class="badge bg-primary" style="color: white"> New </span> Courses </li> <li class="list-group-item"> <span class="badge bg-secondary" style="color: white"> Discontinued </span> Programs </li> <li class="list-group-item"> <span class="badge bg-success" style="color: white"> Most popular </span> Classes </li> <li class="list-group-item"> <span class="badge bg-danger" style="color: white"> Expiring soon </span> Hackathon </li> <li class="list-group-item"> <span class="badge bg-warning" style="color: white"> Going fast </span> Job Portal </li> <li class="list-group-item"> <span class="badge bg-info" style="color: white"> Exciting news </span> Golden membership </li> <li class="list-group-item"> <span class="badge bg-light"> Click bait </span> Login to US </li> </ul> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, podemos personalizar aún más el grupo de listas y las insignias individualmente para obtener el resultado deseado. Usaremos una insignia en forma de píldora con una píldora redondeada de clase para las insignias de notificación en el grupo de lista.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color: green; text-align: center;"> Geeksforgeeks </h1> <ul class="list-group"> <li class="list-group-item"> <span class="badge bg-primary rounded-pill text-light"> New and improved </span> </li> <li class="list-group-item disabled"> <span class="badge bg-danger text-dark"> Discontinued </span> </li> <li class="list-group-item active"> <span class="badge bg-success text-light"> Most popular <span class="badge bg-secondary"> 10 </span> </span> </li> </ul> </body> </html>
Producción:
Referencia:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA