Arranque 4 | Listar grupos

Posted on by Rudeus Greyrat

Los Grupos de Listas se utilizan para mostrar una serie de contenidos de forma organizada. Utilice las clases .list-group y .list-group-item para crear una lista de elementos. La clase .list-group se usa con el elemento <ul> y .list-group-item se usa con el elemento <li>.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <ul class="list-group">
            <li class="list-group-item">
                Data Structure
              </li>
            <li class="list-group-item">
                Operating System
              </li>
            <li class="list-group-item">
                Algorithm
              </li>
        </ul>
    </div>
</body>
</html>

Producción: 
 

Elemento de la lista activa: la clase .active se utiliza para resaltar el elemento actual. 

Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <ul class="list-group">
            <li class="list-group-item active">
                Data Structure
              </li>
            <li class="list-group-item">
                Operating System
              </li>
            <li class="list-group-item">
                Algorithm
              </li>
        </ul>
    </div>
</body>
</html>

Producción: 
 

Lista de grupos con elementos vinculados: utilice las etiquetas <div> y <a> en lugar de <ul> y <li> para crear una lista de grupos con elementos vinculados. La clase .list-group-item-action se usa para configurar el efecto de desplazamiento para cambiar el color de fondo a gris.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action">
                Data Structure
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                Operating System
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                Algorithm
            </a>
        </div>
    </div>
</body>
</html>

Producción: 
 

widget de imagen

Elemento deshabilitado: la clase .disabled se usa para deshabilitar el contenido del texto. Esta clase establece el color del texto en claro. Cuando se usa en enlaces, eliminará el efecto de desplazamiento.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <div class="list-group">
            <a href="#" class="list-group-item disabled">
                Data Structure
            </a>
            <a href="#" class="list-group-item">
                Operating System
            </a>
            <a href="#" class="list-group-item disabled">
                Algorithm
            </a>
        </div>
    </div>
</body>
</html>

Producción: 
 

Limpiar/eliminar bordes: la clase .list-group-flush se usa para eliminar algunos bordes y esquinas redondeadas.
Ejemplo: 
 

Bloque de código

Producción: 
 

Grupos de listas horizontales: la clase .list-group-horizontal se usa para mostrar la lista de elementos horizontalmente en lugar de verticalmente.
Ejemplo: 
 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <ul class="list-group list-group-horizontal">
            <li class="list-group-item">
                Data Structure
            </li>
            <li class="list-group-item">
                Operating System
            </li>
            <li class="list-group-item">
                Algorithm
            </li>
        </ul>
    </div>
</body>
</html>

Producción: 
 

Clases Contextuales: Se utiliza para establecer el color a la lista de elementos. Las clases para colorear los elementos de la lista son: .list-group-item-success , .list-group-item-secondary , .list-group-item-info , .list-group-item-warning , .list-group -item-danger , .list-group-item-primary , .list-group-item-dark y .list-group-item-light .

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <ul class="list-group">
            <li class="list-group-item list-group-item-primary">
                Data Structure
            </li>
            <li class="list-group-item list-group-item-secondary">
                Operating System
            </li>
            <li class="list-group-item list-group-item-success">
                Algorithm
            </li>
            <li class="list-group-item list-group-item-warning">
                DBMS
            </li>
            <li class="list-group-item list-group-item-danger">
                Web Technology
            </li>
        </ul>
    </div>
</body>
</html>

Producción: 
 

Vincular elementos con clases contextuales: las clases contextuales se pueden usar con una lista de elementos.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-primary">
                Data Structure
            </a>
            <a href="#" class="list-group-item list-group-item-secondary">
                Operating System
            </a>
            <a href="#" class="list-group-item list-group-item-success">
                Algorithm
            </a>
            <a href="#" class="list-group-item list-group-item-warning">
                DBMS
            </a>
            <a href="#" class="list-group-item list-group-item-danger">
                Web Technology
            </a>
        </div>
    </div>
</body>
</html>

Producción: 
 

Grupo de lista con insignias: la clase .badge se puede combinar con la clase de utilidad para agregar insignias dentro de la lista de grupos.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
    <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>
    <div class="container">
        <h2>List Groups</h2>
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between
                align-items-center ">Data Structure
                <span class="badge badge-success">10</span>
            </li>
            <li class="list-group-item d-flex justify-content-between
                align-items-center">Computer Network
                <span class="badge badge-success">23</span>
            </li>
            <li class="list-group-item d-flex justify-content-between
                align-items-center">Operating System
                <span class="badge badge-success">39</span>
            </li>
        </ul>
    </div>
</body>
</html>

Producción: 
 

Navegadores compatibles:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *