Source

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbulo no 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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbulo no 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 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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbulo no 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>

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 .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestíbulo no 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, 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">
    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>

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbulo no 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

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.

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

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

  • Dapibus ac facilisis in
  • Un simple elemento de grupo de lista principal
  • Un simple elemento de grupo de lista secundaria
  • 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">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-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.

Dapibus ac facilisis in Un simple elemento de grupo de lista principal Un simple elemento de grupo de lista secundaria 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">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-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 .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1 
<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>

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

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

Donec id elit non mi porta.
Encabezamento do elemento do grupo da lista
hai 3 días

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

Donec id elit non mi porta.
Encabezamento do elemento do grupo da lista
hai 3 días

Donec id elit non mi porta gravida at eget metus. Mecenas 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>

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.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit son nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor are voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud son incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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

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

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

$('#myList a').on('click', function (e) {
  e.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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})