Ir para o conteúdo principal Pular para a navegação de documentos
in English

Listar grupo

Os grupos de listas são um componente flexível e poderoso para exibir uma série de conteúdo. Modifique e estenda-os para oferecer suporte a praticamente qualquer conteúdo.

Exemplo básico

O grupo de lista mais básico é uma lista não ordenada com itens de lista e as classes apropriadas. Construa sobre ele com as opções a seguir, ou com seu próprio CSS, conforme necessário.

  • Um item
  • Um segundo item
  • Um terceiro elemento
  • Um quarto item
  • E um 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>

Itens ativos

Adicione .activea a .list-group-itempara indicar a seleção ativa atual.

  • Um item ativo
  • Um segundo item
  • Um terceiro elemento
  • Um quarto item
  • E um 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>

Itens desativados

Adicione .disableda um .list-group-itempara fazê-lo parecer desabilitado. Observe que alguns elementos com .disabledtambém exigirão JavaScript personalizado para desabilitar totalmente seus eventos de clique (por exemplo, links).

  • Um item desativado
  • Um segundo item
  • Um terceiro elemento
  • Um quarto item
  • E um 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 ou <button>s para criar itens de grupo de lista acionáveis ​​com estados de foco, desabilitado e ativo adicionando .list-group-item-action. Separamos essas pseudoclasses para garantir que grupos de listas feitos de elementos não interativos (como <li>s ou <div>s) não forneçam uma affordance de clique ou toque.

Certifique-se de não usar as .btnclasses padrão aqui .

<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

Com <button>s, você também pode usar o disabledatributo em vez da .disabledclasse. Infelizmente, <a>s não suportam o atributo disabled.

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

Rubor

Adicione .list-group-flushpara remover algumas bordas e cantos arredondados para renderizar os itens do grupo de lista de ponta a ponta em um contêiner pai (por exemplo, cartões).

  • Um item
  • Um segundo item
  • Um terceiro elemento
  • Um quarto item
  • E um 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>

Numerado

Adicione a .list-group-numberedclasse modificadora (e, opcionalmente, use um <ol>elemento) para optar por itens do grupo de lista numerada. Os números são gerados via CSS (em oposição ao estilo <ol>padrão do navegador) para melhor posicionamento dentro dos itens do grupo de lista e para permitir uma melhor personalização.

Os números são gerados por counter-resetno <ol>, e depois estilizados e colocados com um ::beforepseudoelemento no <li>com counter-incremente content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Eles também funcionam muito bem com conteúdo personalizado.

  1. Subtítulo
    Cras justo odio
    14
  2. Subtítulo
    Cras justo odio
    14
  3. Subtítulo
    Cras justo odio
    14
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontal

Adicione .list-group-horizontalpara alterar o layout dos itens do grupo de lista de vertical para horizontal em todos os pontos de interrupção. Como alternativa, escolha uma variante responsiva .list-group-horizontal-{sm|md|lg|xl|xxl}para tornar um grupo de lista horizontal começando no ponto de interrupção min-width. Atualmente , os grupos de listas horizontais não podem ser combinados com grupos de listas niveladas.

Dica profissional: Quer itens de grupo de lista de largura igual quando horizontal? Adicione .flex-filla cada item do grupo de lista.

  • Um item
  • Um segundo item
  • Um terceiro elemento
  • Um item
  • Um segundo item
  • Um terceiro elemento
  • Um item
  • Um segundo item
  • Um terceiro elemento
  • Um item
  • Um segundo item
  • Um terceiro elemento
  • Um item
  • Um segundo item
  • Um terceiro elemento
  • Um item
  • Um segundo item
  • Um 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>
<ul class="list-group list-group-horizontal-xxl">
  <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>

Classes contextuais

Use classes contextuais para estilizar itens de lista com um plano de fundo e uma cor com estado.

  • Um item de grupo de lista padrão simples
  • Um item de grupo de lista primária simples
  • Um item de grupo de lista secundária simples
  • Um item de grupo de lista de sucesso simples
  • Um item de grupo de lista de perigo simples
  • Um item de grupo de lista de aviso simples
  • Um item de grupo de lista de informações simples
  • Um item de grupo de lista de luz simples
  • Um item de grupo de lista escura simples
<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 classes contextuais também funcionam com .list-group-item-action. Observe a adição dos estilos de foco aqui não presentes no exemplo anterior. Também é apoiado o .activeestado; aplique-o para indicar uma seleção ativa em um item de grupo de lista contextual.

<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>
Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .visually-hiddenclasse.

Com emblemas

Adicione emblemas a qualquer item do grupo de lista para mostrar contagens não lidas, atividades e muito mais com a ajuda de alguns utilitários .

  • Um item de lista14
  • Um segundo item da lista2
  • Um terceiro item 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 bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Conteúdo personalizado

Adicione praticamente qualquer HTML dentro, mesmo para grupos de listas vinculadas como o abaixo, com a ajuda dos utilitários flexbox .

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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>

Caixas de seleção e rádios

Coloque as caixas de seleção e rádios do Bootstrap dentro dos itens do grupo de listas e personalize conforme necessário. Você pode usá-los sem <label>s, mas lembre-se de incluir um aria-labelatributo e um valor para acessibilidade.

  • Primeira caixa de seleção
  • Segunda caixa de seleção
  • Terceira caixa de seleção
  • Quarta caixa de seleção
  • Quinta caixa de seleção
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

E se você quiser <label>s .list-group-itempara grandes áreas de acerto, você também pode fazer isso.

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Variáveis

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

Usado em combinação com $theme-colorspara gerar as classes de variantes contextuais para .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Ciclo

Loop que gera as classes modificadoras com o list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Comportamento JavaScript

Use o plug-in JavaScript da guia - inclua-o individualmente ou por meio do bootstrap.jsarquivo compilado - para estender nosso grupo de listas para criar painéis com guias de conteúdo 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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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 dados

Você pode ativar uma navegação de grupo de lista sem escrever nenhum JavaScript simplesmente especificando data-bs-toggle="list"ou em um elemento. Use esses atributos de dados em .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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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>

Por JavaScript

Habilite o item da lista tabable via JavaScript (cada item da lista precisa ser ativado individualmente):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Você pode ativar um item de lista individual de várias maneiras:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Efeito de desvanecimento

Para fazer o painel de guias aparecer gradualmente, adicione .fadea cada arquivo .tab-pane. O primeiro painel de guias também deve .showtornar visível o conteúdo 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

constructor

Ativa um elemento de item de lista e um contêiner de conteúdo. A guia deve ter um data-bs-targetou um hrefdirecionamento para um nó de contêiner no DOM.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

mostrar

Seleciona o item de lista fornecido e mostra seu painel associado. Qualquer outro item de lista selecionado anteriormente torna-se desmarcado e seu painel associado fica oculto. Retorna ao chamador antes que o painel de guias tenha sido mostrado (por exemplo, antes que o shown.bs.tabevento ocorra).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

dispor

Destrói a aba de um elemento.

getInstance

Método estático que permite obter a instância da guia associada a um elemento DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Método estático que permite obter a instância da guia associada a um elemento DOM ou criar uma nova caso não tenha sido inicializada

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Eventos

Ao mostrar uma nova guia, os eventos são acionados na seguinte ordem:

  1. hide.bs.tab(na guia ativa atual)
  2. show.bs.tab(na guia a ser exibida)
  3. hidden.bs.tab(na aba ativa anterior, a mesma do hide.bs.tabevento)
  4. shown.bs.tab(na guia recém-ativada recém-exibida, a mesma do show.bs.tabevento)

Se nenhuma guia já estiver ativa, os eventos hide.bs.tabe hidden.bs.tabnão serão acionados.

Tipo de evento Descrição
show.bs.tab Este evento é acionado na exibição de guias, mas antes que a nova guia seja exibida. Use event.targete event.relatedTargetpara direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
shown.bs.tab Este evento é acionado na exibição de guias após a exibição de uma guia. Use event.targete event.relatedTargetpara direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
hide.bs.tab Este evento é acionado quando uma nova guia deve ser mostrada (e, portanto, a guia ativa anterior deve ser ocultada). Use event.targete event.relatedTargetpara segmentar a guia ativa atual e a nova guia em breve ativa, respectivamente.
hidden.bs.tab Este evento é acionado depois que uma nova guia é mostrada (e, portanto, a guia ativa anterior fica oculta). Use event.targete event.relatedTargetpara segmentar a guia ativa anterior e a nova guia ativa, respectivamente.
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}