List group

Los grupos de listas son un componente flexible y poderoso para mostrar una serie de contenido. Modifíquelos y amplíelos para admitir casi cualquier contenido.

Ejemplo básico

El grupo de lista más básico es una lista desordenada con elementos de lista y las clases adecuadas. Construya sobre él con las opciones que siguen, o con su propio CSS según sea necesario.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>

Elementos activos

Agregue .active a .list-group-item para indicar la selección activa actual.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>

Elementos deshabilitados

Agregue .disabled a .list-group-item para que parezca deshabilitado. Tenga en cuenta que algunos elementos con .disabled también requerirán JavaScript personalizado para deshabilitar completamente sus eventos de clic (por ejemplo, enlaces).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

  <ul class="list-group">
    <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>

Utilice <a> s o <button> s para crear elementos de grupo de listas accionables con estados flotantes, desactivados y activos agregando .list-group-item-action . Separamos estas pseudoclases para asegurarnos de que los grupos de listas hechos de elementos no interactivos (como <li> s o <div> s) no brinden una posibilidad de hacer clic o tocar.

Asegúrese de no utilizar las .btn clases estándar aquí .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">
      Cras justo odio
    </a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
  </div>

Con <button> s, también puede hacer uso del disabled atributo en lugar de la .disabled clase. Lamentablemente, los correos electrónicos <a> no admiten el atributo discapacitado. 


  <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action active">
      Cras justo odio
    </button>
    <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
    <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
  </div>

Enjuagar

Agregar .list-group-flush para eliminar algunos bordes y esquinas redondeadas para representar los elementos del grupo de la lista de borde a borde en un contenedor principal (por ejemplo, tarjetas).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>

Horizontal

Agregar .list-group-horizontal para cambiar el diseño de los elementos del grupo de listas de vertical a horizontal en todos los puntos de interrupción. Alternativamente, elija una variante receptiva .list-group-horizontal-{sm|md|lg|xl} para hacer que un grupo de lista sea horizontal comenzando en ese punto de interrupción min-width . Actualmente, los grupos de listas horizontales no se pueden combinar con los grupos de listas alineadas.

ProTip: ¿Quiere elementos de grupo de lista de igual ancho cuando está horizontal? Agregue .flex-fill a cada elemento de grupo de la lista.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

  <ul class="list-group list-group-horizontal-sm">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

  <ul class="list-group list-group-horizontal-md">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

  <ul class="list-group list-group-horizontal-lg">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

  <ul class="list-group list-group-horizontal-xl">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>

Clases contextuales

Utilice clases contextuales para diseñar elementos de lista con un fondo y color con estado.

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple info list group item
  • A simple warning list group item
  • A simple danger list group item
  • A simple light list group item
  • A simple dark list group item
  • A simple gray list group item
  • A simple tertiary list group item

  <ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
  
    
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
    <li class="list-group-item list-group-item-gray">A simple gray list group item</li>
    <li class="list-group-item list-group-item-tertiary">A simple tertiary list group item</li>
  </ul>

Las clases contextuales también funcionan con .list-group-item-action . Tenga en cuenta la adición de los estilos de desplazamiento aquí que no están presentes en el ejemplo anterior. También se apoya el .active estado; aplicarlo para indicar una selección activa en un elemento de grupo de lista contextual.

Dapibus ac facilisis in A simple primary list group item A simple secondary list group item A simple success list group item A simple info list group item A simple warning list group item A simple danger list group item A simple light list group item A simple dark list group item A simple gray list group item A simple tertiary list group item 

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  
    
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-gray">A simple gray list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-tertiary">A simple tertiary list group item</a>
  </div>
Transmitir significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-only clase.

Con insignias

Agregue insignias a cualquier elemento del grupo de la lista para mostrar los recuentos no leídos, la actividad y más con la ayuda de algunas utilidades.

  • Cras justo odio 14
  • Dapibus ac facilisis en 2
  • Morbi leo risus 1 

  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Cras justo odio
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Dapibus ac facilisis in
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Morbi leo risus
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>

Contenido personalizado

Agregue casi cualquier HTML dentro, incluso para grupos de listas vinculadas como el siguiente, con la ayuda de las utilidades de flexbox .

List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small>3 days ago</small>
      </div>
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      <small>Donec id elit non mi porta.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
      </div>
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      <small class="text-muted">Donec id elit non mi porta.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
      </div>
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      <small class="text-muted">Donec id elit non mi porta.</small>
    </a>
  </div>

Comportamiento de JavaScript

Utilice el complemento JavaScript de pestaña, bootstrap.js inclúyalo individualmente o mediante el archivo compilado, para ampliar nuestro grupo de listas y crear paneles tabulables de contenido local.

...
...
...
...

  <div class="row">
    <div class="col-4">
      <div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
        <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
        <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
        <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
      </div>
    </div>
    <div class="col-8">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
        <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
      </div>
    </div>
  </div>

Usando atributos de datos

Puede activar una navegación de grupo de lista sin escribir JavaScript simplemente especificando data-toggle="list" o en un elemento. Utilice estos atributos de datos en .list-group-item. 


    <!-- List group -->
    <div class="list-group" id="myList" role="tablist">
      <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
    </div>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home" role="tabpanel">...</div>
      <div class="tab-pane" id="profile" role="tabpanel">...</div>
      <div class="tab-pane" id="messages" role="tabpanel">...</div>
      <div class="tab-pane" id="settings" role="tabpanel">...</div>
    </div>

Vía JavaScript

Habilite el elemento de la lista tabulable a través de JavaScript (cada elemento de la lista debe activarse individualmente): 


  $('#myList a').on('click', function (e) {
    e.preventDefault()
    $(this).tab('show')
  })

Puede activar un elemento de lista individual de varias formas:


  $('#myList a[href="#profile"]').tab('show') // Select tab by name
  $('#myList a:first-child').tab('show') // Select first tab
  $('#myList a:last-child').tab('show') // Select last tab
  $('#myList a:nth-child(3)').tab('show') // Select third tab

Efecto de desvanecimiento

Para hacer que el panel de pestañas se desvanezca, agregue .fade a cada uno .tab-pane . El primer panel de pestañas también debe .show hacer visible el contenido inicial. 


  <div class="tab-content">
    <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
    <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
    <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
  </div>

Métodos

pestaña $ ().

Activa un elemento de lista y un contenedor de contenido. La pestaña debe tener una data-target o una href apuntando a un nodo contenedor en el DOM. 


  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
  </div>
  
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
  
  <script>
    $(function () {
      $('#myList a:last-child').tab('show')
    })
  </script>

.tab ('mostrar')

Selecciona el elemento de la lista dado y muestra su panel asociado. Cualquier otro elemento de la lista que se haya seleccionado previamente queda sin seleccionar y su panel asociado se oculta. Vuelve a la persona que llama antes de que se muestre el panel de pestañas (por ejemplo, antes de shown.bs.tab que ocurra el evento). 


  $('#someListItem').tab('show')

Eventos

Cuando se muestra una nueva pestaña, los eventos se activan en el siguiente orden:

  1. hide.bs.tab (en la pestaña activa actual)
  2. show.bs.tab (en la pestaña que se muestra)
  3. hidden.bs.tab (en la pestaña activa anterior, la misma que para el hide.bs.tab evento)
  4. shown.bs.tab (en la pestaña recién activa que se acaba de mostrar, la misma que para el show.bs.tab evento)

Si ninguna ficha ya estaba activo, los hide.bs.tab y hidden.bs.tab no serán despedidos eventos.

Tipo de evento Descripción
show.bs.tab Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Utilice event.targety event.relatedTarget para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
muestra.bs.tab Este evento se activa en la presentación de pestañas después de que se haya mostrado una pestaña. Utilice event.targety event.relatedTarget para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
hide.bs.tab Este evento se activa cuando se muestra una nueva pestaña (y, por lo tanto, se oculta la pestaña activa anterior). Utilice event.target y event.relatedTarget para apuntar a la pestaña activa actual y la nueva pestaña que pronto estará activa, respectivamente.
hidden.bs.tab Este evento se activa después de que se muestra una nueva pestaña (y por lo tanto la pestaña activa anterior está oculta). Utilice event.targety event.relatedTarget para apuntar a la pestaña activa anterior y la nueva pestaña activa, respectivamente. 

  $('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
    e.target // newly activated tab
    e.relatedTarget // previous active tab
  })