Bootstrap (Parte 15): Listas de elementos

Redes sociales

Bootstrap

Las listas de elementos de Bootstrap son componentes flexibles y poderosos, y que te permitirán mostrar listados formados por elementos complejos.

Lista Básica

La lista de elementos más básica está formada por un listado desordenado de elementos.

Para crear una lista básica, utiliza un elemento <ul> con las clase .list-group, y elementos <li> con la clase .list-group-item

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <ul class="list-group">
         <li class="list-group-item">Primer elemento</li>
         <li class="list-group-item">Segundo elemento</li>
         <li class="list-group-item">Tercer elemento</li>
      </ul>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Listas de elementos con Badges

Puedes añadir badges a la lista de elementos. Los badges se alinearán automáticamente a la derecha del elemento.

Para crear un badge, utiliza un elemento <span> con la clase .badge en el interior del elemento de lista.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <ul class="list-group">
         <li class="list-group-item"><span class="badge">12</span> Nuevos</li>
         <li class="list-group-item"><span class="badge">5</span> Eliminados</li>
         <li class="list-group-item"><span class="badge">3</span> Advertencias</li>
      </ul>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Listas de elementos con enlaces

Para crear una lista de elementos con enlaces, tienes que utilizar un elemento <div> en vez del elemento <ul> y <a> en vez de <li>:

Ejemplo

!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <div class="list-group">
         <a href="#" class="list-group-item active">Primer elemento</a>
         <a href="#" class="list-group-item">Segundo elemento</a>
         <a href="#" class="list-group-item">Tercer elemento</a>
      </div>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Elementos desactivados

Para desactivar un elemento de la lista, utiliza la clase .disabled

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <div class="list-group">
         <a href="#" class="list-group-item disabled">Primer elemento</a>
         <a href="#" class="list-group-item">Segundo elemento</a>
         <a href="#" class="list-group-item">Tercer elemento</a>
     </div>
   </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Clases contextuales

Puedes colorear los elementos de una lista utilizando las clases: .list-group-item-success, list-group-item-info,  list-group-item-warning, y .list-group-item-danger

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      Listas de elementos con clases contextuales
      <ul class="list-group">
         <li class="list-group-item list-group-item-success">Primer elemento</li>
         <li class="list-group-item list-group-item-info">Segundo elemento</li>
         <li class="list-group-item list-group-item-warning">Tercer elemento</li>
         <li class="list-group-item list-group-item-danger">Cuarto elemento</li>
     </ul>
     Elementos con enlaces y clases contextuales
     <div class="list-group">
        <a href="#" class="list-group-item list-group-item-success">Primer elemento</a>
        <a href="#" class="list-group-item list-group-item-info">Segundo elemento</a>
        <a href="#" class="list-group-item list-group-item-warning">Tercer elemento</a>
        <a href="#" class="list-group-item list-group-item-danger">Cuarto elemento</a>
     </div>
   </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Clases personalizadas

Puedes añadir casi cualquier contenido HTML en una lista de elementos.

Para ello, Bootstrap proporciona las clases: .list-group-item-heading y .list-group-item-text

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo - Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <div class="list-group">
         <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">First List Group Item Heading</h4>
            List Group Item Text
         </a>
         <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
            List Group Item Text
         </a>
         <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
            List Group Item Text
        </a>
     </div>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



 

Redes sociales

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.