in English

Grupo de lista

Los grupos de listas son un componente flexible y potente para mostrar una serie de contenidos. Modifíquelos y amplíelos para que admitan prácticamente 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.

  • un artículo
  • un segundo elemento
  • un tercer elemento
  • Un cuarto elemento
  • y un quinto
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Elementos activos

Agregar .activea a .list-group-itempara indicar la selección activa actual.

  • Un elemento activo
  • un segundo elemento
  • un tercer elemento
  • Un cuarto elemento
  • y un quinto
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

elementos deshabilitados

Agregue .disableda .list-group-itempara que aparezca deshabilitado. Tenga en cuenta que algunos elementos .disabledtambién requerirán JavaScript personalizado para deshabilitar por completo sus eventos de clic (por ejemplo, enlaces).

  • Un elemento deshabilitado
  • un segundo elemento
  • un tercer elemento
  • Un cuarto elemento
  • y un quinto
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Use <a>s o <button>s para crear elementos de grupo de lista procesable con estados de activación, desactivado y activo agregando .list-group-item-action. Separamos estas pseudoclases para garantizar que los grupos de listas hechos de elementos no interactivos (como <li>s o <div>s) no proporcionen la posibilidad de hacer clic o tocar.

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

El elemento de enlace actual Un segundo elemento de enlace Un tercer elemento de enlace Un cuarto elemento de enlace Un elemento de enlace deshabilitado 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Con <button>s, también puede utilizar el disabledatributo en lugar de la .disabledclase. Lamentablemente, <a>s no admite el atributo deshabilitado.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Enjuagar

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

  • un artículo
  • un segundo elemento
  • un tercer elemento
  • Un cuarto elemento
  • y un quinto
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Horizontal

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

Consejo profesional: ¿Desea elementos de grupo de lista de igual ancho cuando están en posición horizontal? Agregar .flex-filla cada elemento del grupo de lista.

  • un artículo
  • un segundo elemento
  • un tercer elemento
  • un artículo
  • un segundo elemento
  • un tercer elemento
  • un artículo
  • un segundo elemento
  • un tercer elemento
  • un artículo
  • un segundo elemento
  • un tercer elemento
  • un artículo
  • un segundo elemento
  • un tercer elemento
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Clases contextuales

Utilice clases contextuales para aplicar estilo a los elementos de la lista con un fondo y un color con estado.

  • Un elemento de grupo de lista predeterminado simple
  • Un elemento de grupo de lista principal simple
  • Un elemento de grupo de lista secundario simple
  • Un elemento de grupo de lista de éxito simple
  • Un elemento de grupo de lista de peligro simple
  • Un elemento de grupo de lista de advertencia simple
  • Un elemento de grupo de lista de información simple
  • Un elemento de grupo de lista de luz simple
  • Un elemento de grupo de lista oscura simple
<ul class="list-group">
  <li class="list-group-item">A simple default list group item</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-danger">A simple danger 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-info">A simple info 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>
</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 .activeestado; aplicarlo para indicar una selección activa en un elemento de grupo de lista contextual.

Un elemento de grupo de lista predeterminado simple Un elemento de grupo de lista principal simple Un elemento de grupo de lista secundario simple Un elemento de grupo de lista de éxito simple Un elemento de grupo de lista de peligro simple Un elemento de grupo de lista de advertencia simple Un elemento de grupo de lista de información simple Un elemento de grupo de lista de luz simple Un elemento de grupo de lista oscura simple 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</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-danger">A simple danger 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-info">A simple info 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>
</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 mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-onlyclase.

con insignias

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

  • Un elemento de la lista14
  • Un segundo elemento de la lista2
  • Un tercer elemento de la lista1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <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 que se muestra a continuación, con la ayuda de las utilidades Flexbox .

Encabezado de elemento de grupo de lista
Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y alguna letra pequeña.
Encabezado de elemento de grupo de lista
Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y alguna letra pequeña apagada.
Encabezado de elemento de grupo de lista
Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y alguna letra pequeña apagada. 
<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">Some placeholder content in a paragraph.</p>
    <small>And some small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Comportamiento de JavaScript

Use el complemento JavaScript de pestañas, inclúyalo individualmente o a través del archivo compilado bootstrap.js, para ampliar nuestro grupo de listas y crear paneles de contenido local que se puedan tabular.

Algún contenido de marcador de posición en un párrafo relacionado con "Inicio". Y algo más de contenido, usado aquí solo para rellenar y llenar este panel de pestañas. En producción, obviamente tendrías más contenido real aquí. Y no solo texto. Podría ser cualquier cosa, de verdad. Texto, imágenes, formularios.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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>

Uso de atributos de datos

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

<div role="tabpanel">
  <!-- 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>
</div>

A través de JavaScript

Habilite el elemento de la lista con pestañas a través de JavaScript (cada elemento de la lista debe activarse individualmente):

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

Puede activar elementos de lista individuales de varias maneras:

$('#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 .fadea cada .tab-pane. El primer panel de pestañas también debe tener .showpara 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 elemento de lista y un contenedor de contenido. La pestaña debe tener un data-targeto un hrefnodo 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 dada y muestra su panel asociado. Cualquier otro elemento de la lista que se seleccionó previamente se deselecciona y su panel asociado se oculta. Vuelve a la persona que llama antes de que se haya mostrado realmente el panel de pestañas (por ejemplo, antes de shown.bs.tabque ocurra el evento).

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

Eventos

Al mostrar 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 mostrará)
  3. hidden.bs.tab(en la pestaña activa anterior, la misma que para el hide.bs.tabevento)
  4. shown.bs.tab(en la pestaña recién activa recién mostrada, la misma que para el show.bs.tabevento)

Si ninguna pestaña ya estaba activa, los eventos hide.bs.taby hidden.bs.tabno se activarán.

Tipo de evento Descripción
mostrar.bs.tab Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Use event.targety event.relatedTargetpara apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
mostrado.bs.tab Este evento se activa en la presentación de pestañas después de que se haya mostrado una pestaña. Use event.targety event.relatedTargetpara apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
ocultar.bs.tab Este evento se activa cuando se va a mostrar una nueva pestaña (y, por lo tanto, se va a ocultar la pestaña activa anterior). Use event.targety event.relatedTargetpara apuntar a la pestaña activa actual y la nueva pestaña que pronto estará activa, respectivamente.
oculto.bs.tab Este evento se activa después de que se muestra una nueva pestaña (y, por lo tanto, se oculta la pestaña activa anterior). Use event.targety event.relatedTargetpara apuntar a la pestaña activa anterior y la nueva pestaña activa, respectivamente. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})