in English

Grupo de listas

Os grupos de listas son un compoñente flexible e poderoso para mostrar unha serie de contidos. Modifícaos e estendeos para admitir case calquera contido.

Exemplo básico

O grupo de listas máis básico é unha lista sen ordenar con elementos de lista e as clases adecuadas. Constrúeo coas opcións que seguen ou co teu propio CSS segundo sexa necesario.

  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
  • Un cuarto elemento
  • E 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

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

  • Un elemento activo
  • Un segundo elemento
  • Un terceiro elemento
  • Un cuarto elemento
  • E 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 desactivados

Engade .disableda un .list-group-itempara que pareza desactivado. Teña en conta que algúns elementos con .disabledtamén precisarán JavaScript personalizado para desactivar completamente os seus eventos de clic (por exemplo, ligazóns).

  • Un elemento desactivado
  • Un segundo elemento
  • Un terceiro elemento
  • Un cuarto elemento
  • E 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>

Engadindo . <a>_ <button>_ _ _ .list-group-item-actionSeparamos estas pseudoclases para asegurarnos de que os grupos de listas feitos de elementos non interactivos (como <li>s ou <div>s) non ofrezan un clic ou toque.

Asegúrate de non usar aquí as clases estándar.btn .

O elemento da ligazón actual Un segundo elemento de ligazón Un terceiro elemento de ligazón Un cuarto elemento de ligazón Un elemento de ligazón desactivado 
<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, tamén podes facer uso do disabledatributo en lugar da .disabledclase. Lamentablemente, <a>s non admite o atributo desactivado.

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

Fluxado

Engadir .list-group-flushpara eliminar algúns bordos e cantos redondeados para renderizar os elementos do grupo da lista de bordo a bordo nun contenedor principal (por exemplo, tarxetas).

  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
  • Un cuarto elemento
  • E 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

Engadir .list-group-horizontalpara cambiar o deseño dos elementos do grupo da lista de vertical a horizontal en todos os puntos de interrupción. Alternativamente, escolla unha variante receptiva .list-group-horizontal-{sm|md|lg|xl}para facer un grupo de listas horizontal comezando no punto de interrupción dese punto min-width. Actualmente , os grupos de listas horizontais non se poden combinar con grupos de listas vaciadas.

ProTip: Queres elementos do grupo da lista de ancho igual cando están horizontais? Engadir .flex-filla cada elemento do grupo da lista.

  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
  • Un elemento
  • Un segundo elemento
  • Un terceiro 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 contextuais

Use clases contextuais para dar estilo aos elementos da lista cun fondo e cor con estado.

  • Un simple elemento de grupo de lista predeterminado
  • Un simple elemento de grupo de lista principal
  • Un elemento de grupo de lista secundario sinxelo
  • Un simple elemento de grupo da lista de éxitos
  • Un simple elemento de grupo da lista de perigos
  • Un simple elemento de grupo de lista de avisos
  • Un simple elemento de grupo de lista de información
  • Un simple elemento de grupo de lista de luz
  • Un simple elemento de grupo de lista escura
<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>

As clases contextuais tamén funcionan con .list-group-item-action. Teña en conta a adición dos estilos de hover aquí non presentes no exemplo anterior. Tamén se apoia o .activeEstado; aplícao para indicar unha selección activa nun elemento de grupo de lista contextual.

Un simple elemento de grupo de lista predeterminado Un simple elemento de grupo de lista principal Un elemento de grupo de lista secundario sinxelo Un simple elemento de grupo da lista de éxitos Un simple elemento de grupo da lista de perigos Un simple elemento de grupo de lista de avisos Un simple elemento de grupo de lista de información Un simple elemento de grupo de lista de luz Un simple elemento de grupo de lista escura 
<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 ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.

Con distintivos

Engade insignias a calquera elemento do grupo da lista para mostrar contas non lidas, actividade e moito máis coa axuda dalgunhas utilidades .

  • Un elemento da lista14
  • Un segundo elemento da lista2
  • Un terceiro elemento da 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>

Contido personalizado

Engade case calquera HTML dentro, mesmo para grupos de listas vinculadas como o seguinte, coa axuda das utilidades flexbox .

Encabezamento do elemento do grupo da lista
hai 3 días

Algún contido de marcador de posición nun parágrafo.

E algunha letra pequena.
Encabezamento do elemento do grupo da lista
hai 3 días

Algún contido de marcador de posición nun parágrafo.

E algunhas letras pequenas silenciadas.
Encabezamento do elemento do grupo da lista
hai 3 días

Algún contido de marcador de posición nun parágrafo.

E algunhas letras pequenas silenciadas. 
<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>

Comportamento de JavaScript

Use o complemento de JavaScript da pestana (inclúeo individualmente ou a través do bootstrap.jsficheiro compilado) para ampliar o noso grupo de listas e crear paneis de contido local con pestanas.

Algún contido de marcador de posición nun parágrafo relacionado con "Inicio". E algo máis de contido, que se usa aquí só para completar e encher este panel de pestanas. Na produción, obviamente terías máis contido real aquí. E non só texto. Pode ser calquera cousa, de verdade. Textos, imaxes, 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>

Usando atributos de datos

Pode activar unha navegación de grupo de lista sen escribir JavaScript simplemente especificando data-toggle="list"ou nun elemento. Use estes 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>

Vía JavaScript

Activa o elemento da lista con tabulacións mediante JavaScript (cada elemento da lista debe activarse individualmente):

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

Podes activar un elemento de lista individual de varias maneiras:

$('#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 desvanecemento

Para que o panel de pestanas se desvanece, engádeo .fadea cada un .tab-pane. O primeiro panel de pestanas tamén debe .showfacer visible o contido 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

$().tab

Activa un elemento de lista e un contedor de contido. A pestana debería ter un nodo de contedores data-targetou un hrefnodo de destino no 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 o elemento da lista e mostra o seu panel asociado. Calquera outro elemento da lista que se seleccionou anteriormente non se selecciona e o seu panel asociado queda oculto. Volve ao interlocutor antes de que se amosara o panel de pestanas (por exemplo, antes de shown.bs.tabque se produza o evento).

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

Eventos

Cando se mostra unha nova pestana, os eventos desenvólvense na seguinte orde:

  1. hide.bs.tab(na pestana activa actual)
  2. show.bs.tab(na pestana por mostrar)
  3. hidden.bs.tab(na pestana activa anterior, a mesma que para o hide.bs.tabevento)
  4. shown.bs.tab(na pestana que acaba de mostrarse activa, a mesma que para o show.bs.tabevento)

Se xa non estaba activa ningunha pestana, os eventos hide.bs.tabe hidden.bs.tabnon se activarán.

Tipo de evento Descrición
mostrar.bs.tab Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use event.targete event.relatedTargetpara orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente.
mostrado.bs.tab Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use event.targete event.relatedTargetpara orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente.
ocultar.bs.tab Este evento desenvólvese cando se quere mostrar unha nova pestana (e, polo tanto, debe ocultarse a pestana activa anterior). Use event.targete event.relatedTargetpara orientar a pestana activa actual e a nova pestana que estará activa en breve, respectivamente.
hidden.bs.tab Este evento desenvólvese despois de que se amose unha nova pestana (e polo tanto se oculta a pestana activa anterior). Use event.targete event.relatedTargetpara apuntar á pestana activa anterior e á nova pestana activa, respectivamente. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})