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>

Links e botões

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 .

O item de link atual Um segundo item de link Um terceiro item de link Um quarto item de link Um item de link desativado

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

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>

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

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

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.

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

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

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

Conteúdo personalizado

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

Listar cabeçalho do item do grupo

3 dias atrás

Algum conteúdo de espaço reservado em um parágrafo.

E algumas letras pequenas.

Listar cabeçalho do item do grupo

3 dias atrás

Algum conteúdo de espaço reservado em um parágrafo.

E algumas letras pequenas suaves.

Listar cabeçalho do item do grupo

3 dias atrás

Algum conteúdo de espaço reservado em um parágrafo.

E algumas letras pequenas suaves.

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

Casa Perfil Mensagens Definições

Algum conteúdo de espaço reservado em um parágrafo relacionado a "Início". E mais algum conteúdo, usado aqui apenas para preencher e preencher este painel de guias. Na produção, você obviamente teria mais conteúdo real aqui. E não apenas texto. Pode ser qualquer coisa, na verdade. Texto, imagens, formulários.

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 dados

Você pode ativar uma navegação de grupo de lista sem escrever nenhum JavaScript simplesmente especificando data-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-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>

Por JavaScript

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

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

Você pode ativar um item de lista individual de várias 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

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

$().tab

Ativa um elemento de item de lista e um contêiner de conteúdo. A guia deve ter um data-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-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')

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

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

Eventos

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

hide.bs.tab(na guia ativa atual)
show.bs.tab(na guia a ser exibida)
hidden.bs.tab(na aba ativa anterior, a mesma do hide.bs.tabevento)
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.guia	Este evento é acionado na exibição de guias, mas antes que a nova guia seja exibida. Use `event.target`e `event.relatedTarget`para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
mostrado.bs.guia	Este evento é acionado na exibição de guias após a exibição de uma guia. Use `event.target`e `event.relatedTarget`para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
ocultar.bs.guia	Este evento é acionado quando uma nova guia deve ser mostrada (e, portanto, a guia ativa anterior deve ser ocultada). Use `event.target`e `event.relatedTarget`para segmentar a guia ativa atual e a nova guia em breve ativa, respectivamente.
tab.bs.escondidos	Este evento é acionado depois que uma nova guia é mostrada (e, portanto, a guia ativa anterior fica oculta). Use `event.target`e `event.relatedTarget`para segmentar a guia ativa anterior e a nova guia ativa, respectivamente.

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