Grupos lista básica
O grupo de listas mais básico é uma lista não ordenada com itens da lista:
- primeiro item
- segundo item
- terceiro item
Para criar um grupo de lista de base, use um <ul> elemento com classe .list-group , e <li> elementos com class .list-group-item :
Exemplo
<ul class="list-group">
<li class="list-group-item">First
item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul> Tente você mesmo " Lista de Grupo com emblemas
Você também pode adicionar emblemas a um grupo de lista. Os emblemas será automaticamente posicionado à direita:
- 12 Novo
- 5 Deleted
- 3 Avisos
Para criar um crachá, criar um <span> elemento com classe .badge dentro do item da lista:
Exemplo
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> Tente você mesmo " Lista de Grupo Com os itens vinculados
Os itens em um grupo lista também pode ser hiperlinks. Isto irá adicionar uma cor de fundo cinza em foco:
Para criar um grupo de listas com itens ligados, uso <div> em vez de <ul> e <a> em vez de <li> :
Exemplo
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> Tente você mesmo " Estado ativo
Use o .active classe para destacar o item atual:
Exemplo
<div class="list-group">
<a href="#" class="list-group-item
active">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> Tente você mesmo " item desativado
O grupo seguinte lista tem um item desativado:
Para desativar um item, adicione o .disabled classe:
Exemplo
<div class="list-group">
<a href="#" class="list-group-item
disabled">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> Tente você mesmo " Classes contextuais
aulas contextuais pode ser usado para itens da lista de cores:
- primeiro item
- segundo item
- terceiro item
- quarto item
As classes para colorir list-itens são: .list-group-item-success , list-group-item-info , list-group-item-warning , e .list-group-item-danger :
Exemplo
<ul class="list-group">
<li class="list-group-item
list-group-item-success">First item</li>
<li
class="list-group-item list-group-item-info">Second item</li>
<li
class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul> Tente você mesmo " conteúdo Personalizado
Você pode adicionar praticamente qualquer HTML dentro de um item do grupo lista.
Bootstrap fornece as classes .list-group-item-heading e .list-group-item-text que pode ser usado da seguinte maneira:
Exemplo
<div class="list-group">
<a href="#" class="list-group-item
active">
<h4 class="list-group-item-heading">First
List Group Item Heading</h4>
<p
class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »