grupos de listas de Bootstrap
Neste capítulo vamos explicar a lista de grupos. Lista de componentes utilizados na lista apresentada sob a forma de complexo e o conteúdo personalizado. Criar uma lista básica de grupos da seguinte forma:
- O elemento <ul> Adicionarclasse .list-grupo.
- Para o <li> Adicionarclasse .list-group-item.
O exemplo a seguir ilustra esse ponto:
Exemplos
<Ul class = "lista-grupo">
<Li class = "lista-group-produto "> registro de nome de domínio livre </ li>
<Li class = "lista-group-produto "> livre Janela espaço de hospedagem </ li>
<Li class = "lista-group-produto "> O número de imagens </ li>
<Li class = "lista-group-produto "> 24 * 7 suporte </ li>
<Li class = "lista-group-produto "> Atualize custo anual </ li>
</ Ul>
Os resultados são os seguintes:
Adicionar um crachá para a lista de grupos
Podemos adicionar um crachá componentes a qualquer item da lista, ele é automaticamente posicionado à direita. Somente você precisa adicionar um<span class = "badge"> à <li> elemento.O exemplo a seguir ilustra esse ponto:
Exemplos
<Ul class = "lista-grupo">
<Li class = "lista-group-produto "> registro de nome de domínio livre </ li>
<Li class = "lista-group-produto "> livre Janela espaço de hospedagem </ li>
<Li class = "lista-group-produto "> O número de imagens </ li>
<Li class = "lista-group-produto ">
<span class = "badge"> new </ span> 24 * 7 suporte </ li>
<Li class = "lista-group-produto "> Atualize custo anual </ li>
<Li class = "lista-group-produto ">
<span class = "badge"> new </ span> desconto </ li>
</ Ul>
Os resultados são os seguintes:
Adicione um link para a lista de grupos
Ao usar a marca de âncora em vez de uma lista de itens, podemos adicionar um link para a lista de grupos. Precisamos usar <div> em vez de <ul> elemento. O exemplo a seguir ilustra esse ponto:
Exemplos
<A href = "#" class = "lista-group-item de ativo"> registro de nome de domínio livre </ a>
<A href = "#" class = "lista-group-produto "> 24 * 7 suporte </ a>
<A href = "#" class = "lista-group-produto "> hospedagem gratuita espaço da janela </ a>
<A href = "#" class = "lista-group-produto "> O número de imagens </ a>
<A href = "#" class = "lista-group-produto "> Atualize custo anual </ a>
Os resultados são os seguintes:
Adicionar conteúdo personalizado à lista de grupos
Nós adicionamos links para o topo da lista de grupos para adicionar conteúdo HTML arbitrário. O exemplo a seguir ilustra esse ponto:
Exemplos
<Div class = "lista-grupo">
<A href = "#" class = "lista-group-item de ativo">
<H4 class = "lista-group-item de -heading"> pacote Portal </ h4>
</ A>
<A href = "#" class = "lista-group-produto ">
<H4 class = "lista-grupo de itens -heading"> inscrição gratuita nome de domínio </ h4>
<P class = "lista-group-item de -text"> Você será registo de nomes de domínio gratuitamente através do site. </ P>
</ A>
<A href = "#" class = "lista-group-produto ">
<H4 class = "lista-group-item de -heading"> 24 * 7 suporte </ h4>
<P class = "lista-group-item de -text"> Nós oferecemos 24 * 7 suporte. </ P>
</ A>
</ Div>
<Div class = "lista-grupo">
<A href = "#" class = "lista-group-item de ativo">
<H4 class = "lista-group-item de -heading"> pacote de site de negócios </ h4>
</ A>
<A href = "#" class = "lista-group-produto ">
<H4 class = "lista-grupo de itens -heading"> inscrição gratuita nome de domínio </ h4>
<P class = "lista-group-item de -text"> Você será registo de nomes de domínio gratuitamente através do site. </ P>
</ A>
<A href = "#" class = "lista-group-produto ">
<H4 class = "lista-group-item de -heading"> 24 * 7 suporte </ h4>
<P class = "lista-group-item de -text"> Nós oferecemos 24 * 7 suporte. </ P>
</ A>
</ Div>
Os resultados são os seguintes:
