Los grupos de listas se utilizan para mostrar una serie de contenidos. Podemos modificarlos para admitir cualquier contenido según nuestras necesidades. El uso de List-Groups es solo para mostrar una serie o lista de contenido de forma organizada.
A continuación, se muestra un grupo de listas básico creado con unordered_lists en HTML y las clases de Bootstrap adecuadas :
HTML
<!DOCTYPE html> <html> <head> <title>List Groups example</title> <!-- Link Bootstrap Files --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </head> <body> <p>To do list</p> <ul class="list-group"> <li class="list-group-item">study</li> <li class="list-group-item">pay bills</li> <li class="list-group-item">call mom</li> <li class="list-group-item">drop an email</li> </ul> </body> </html>
Producción:
Elementos de la lista activa: agregue la clase .active al elemento de la lista para indicar que es el elemento actualmente activo.
HTML
<!DOCTYPE html> <html> <head> <title>List Groups example</title> <!-- Link Bootstrap Files --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </head> <body> <p>To do list</p> <ul class="list-group"> <li class="list-group-item active">study</li> <li class="list-group-item">pay bills</li> <li class="list-group-item">call mom</li> <li class="list-group-item">drop an email</li> </ul> </body> </html>
Producción:
Elementos de la lista deshabilitados: agregue la clase .disabled a un elemento de la lista para indicar que está deshabilitado. Cuando el contenido que se deshabilitará es un enlace/botón, es posible que debamos agregar un código javascript personalizado para deshabilitar los elementos por completo.
HTML
<!DOCTYPE html> <html> <head> <title>List Groups example</title> <!-- Add Bootstrap Links --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </head> <body> <p>To do list</p> <ul class="list-group"> <!-- Using the disabled bootstrap class on below List Item will make it faded --> <li class="list-group-item disabled">study</li> <li class="list-group-item">pay bills</li> <li class="list-group-item">call mom</li> <li class="list-group-item">drop an email</li> </ul> </body> </html>
Producción:
Hipervínculos y botones : use la clase .list-group-item-action para crear elementos de lista procesables con estados activos, deshabilitados y activos.
HTML
<!DOCTYPE html> <html> <head> <title>List Groups example</title> <!-- Add Bootstrap Links --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </head> <body> <p>Social Networks</p> <ul class="list-group"> <a href="#" class="list-group-item list-group-item-action">Google</a> <a href="#" class="list-group-item list-group-item-action active">Facebook</a> <a href="#" class="list-group-item list-group-item-action disabled">Twitter</a> <a href="#" class="list-group-item list-group-item-action">LinkedIn</a> </ul> </body> </html>
Producción:
Flush : use la clase Flush para eliminar algunos bordes y esquinas redondeadas, de modo que se vea bien en el contenedor principal.
HTML
<!DOCTYPE html> <html> <head> <title>List Groups Example</title> <!-- Add important Bootstrap Links --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </head> <body> <p>To do lists</p> <ul class="list-group list-group-flush"> <li class="list-group-item">study</li> <li class="list-group-item">pay bills</li> <li class="list-group-item">call mom</li> <li class="list-group-item">drop an email</li> </ul> </body> </html>
Producción:
Clases contextuales : use clases contextuales para diseñar los elementos de la lista con el fondo y el color adecuados.
HTML
<!DOCTYPE html> <html> <head> <title>List Groups example</title> <!-- Add Bootstrap Links --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </head> <body> <ul class="list-group"> <li class="list-group-item"> Basic list group item </li> <li class="list-group-item list-group-item-primary"> Primary list group item </li> <li class="list-group-item list-group-item-secondary"> Secondary list group item </li> <li class="list-group-item list-group-item-success"> Success list group item </li> <li class="list-group-item list-group-item-danger"> Danger list group item </li> <li class="list-group-item list-group-item-warning"> Warning list group item </li> <li class="list-group-item list-group-item-info"> Info list group item </li> <li class="list-group-item list-group-item-light"> Light list group item </li> <li class="list-group-item list-group-item-dark"> Dark list group item </li> </ul> </body> </html>
Producción:
Insignias : podemos agregar insignias para enumerar elementos de grupo como se muestra a continuación:
HTML
<!DOCTYPE html> <html> <head> <title>Badge Example</title> <!-- Adding Bootstrap Classes --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> </head> <body> <div class="list-group"> <button type="button" class="list-group-item list-group-item-action"> NOTIFICATIONS <span class="badge badge-pill badge-light">2</span> </button> <button type="button" class="list-group-item list-group-item-action"> MESSAGES <span class="badge badge-pill badge-warning">2</span> </button> <button type="button" class="list-group-item list-group-item-action"> UPDATES <span class="badge badge-pill badge-danger">2</span> </button> <button type="button" class="list-group-item list-group-item-action"> NEWS <span class="badge badge-pill badge-success">2</span> </button> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Referencia:
Publicación traducida automáticamente
Artículo escrito por sai kiran Chadaram y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA