O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
Os grupos de listas são componentes flexíveis e poderosos que podem não apenas ser usados para exibir um conjunto simples de elementos, mas também para conteúdo personalizado complexo. O grupo de listas pode ser usado para criar listas de listas, navegação vertical e outros efeitos e também podem criar componentes mais bonitos com outros componentes. O List Group também é um componente independente na estrutura do bootstrap, por isso também possui seu próprio código -fonte independente:
Menos: list-group.less
SASS: _LIST-GROUP.SCSS
O grupo de lista se parece com os itens da lista dos símbolos da lista e estão equipados com alguns estilos específicos. O grupo de listas básicas na estrutura do bootstrap inclui principalmente duas partes:
Grupo de lista: contêiner de grupo de listas, comumente usado é o elemento UL, ou pode ser um elemento OL ou Div
List-Group-Item: Item da lista, comumente usado é o elemento Li, ou pode ser um elemento div
Não há muita configuração de estilo para o grupo de listas básicas, e o espaçamento, as fronteiras e os cantos arredondados são definidos principalmente;
.List-grupo {preenchimento-esquerda: 0; margem-fundo: 20px;}. 4px; Border-top-Right-Radius: 4px;}.Vamos dar uma olhada em um exemplo:
<H1> Grupo de listas básicas </h1> <ul> <li> Arroz de batata refogado </li> <li> Macarrão frito de frango frito
Grupo de lista com crachás
Um grupo de lista com crachás é na verdade um efeito de combinar o componente do crachá e o componente da lista básica na estrutura do bootstrap. O método específico é muito simples. Basta adicionar o componente de crachá "crachá" ao .list-group-iteem.
Princípio de implementação:
Defina um bóia direita para o crachá, é claro, se dois crachás aparecerem em um item da lista ao mesmo tempo, a distância entre eles também será definida.
.List-group-item> .badge {float: direita;}.exemplo:
<h1> List Group with Badge </h1> <ul> <li> <man> 13 </span> arroz com bacon e batatas </li> <li> <li> <span> 20 </span> Flazeiro picante Freriu Nuggets Thu </li> <li> <li> <li> 12 </pan> ovo de corila <li> <li> <li> <li> Beans </li> <li> <span> 8 </span> costelas Hawthorn </li> <li> <span> 15 </span> camarão do rio frito em alho -poró </li> </ul>
Grupo de lista com links
Um grupo de lista com conexões significa que cada item da lista tem um efeito de link. O que as pessoas geralmente pensam é adicionar links ao texto do item da lista com base no grupo de lista básica, como:
<ul> <li> <a href = "#"> Bao Rice Bried Bried Rice </a> </li> <li> <a href = "#"> pepitas de frango frito picantes </a> </li> <li> <a href = "#"> corila a ovo de corila tofu "</a> Beans </a> </li> <li> <a href = "#"> costelas de espinheiro </a> </li> <li> <a href = "#"> camarão do rio frito em alho -poró </a> </li> </ul>
Os efeitos são os seguintes:
Há uma desvantagem nisso, ou seja, a área de cliques do link é válida apenas no texto; Mas, muitas vezes, espero que qualquer área do item da lista possa ser clicável, por isso preciso adicionar um estilo adicional ao rótulo do link: Display: Block; Mas na estrutura do bootstrap, outro método de implementação ainda é adotado, que é substituir o Ul.List-Group pelo Div.List-Group e o Li.List-Group-Item pelo A.List-Group-Item, para que o efeito desejado possa ser alcançado.
Princípio de implementação:
Se você usar o A.List-Group-Item, o estilo precisará ser processado, como: Remover o texto sublinha, aumentar o efeito da suspensão, etc.; A seguir, o código -fonte do CSS:
a.list-group-item {color: #555;}a.list-group-item .list-group-item-heading {color: #333;}a.list-group-item:hover,a.list-group-item:focus {color: #555;text-decoration: none;background-color: #f5f5f5;}Uso de grupos de lista de links:
<h1> List Group with Links </h1> <ul> <a href = "#"> bacon e arroz de batata empurrados href = "#"> costelas Hawthorn </a> <a href = "#"> camarão do rio frito com alho -poró </a> </ul>
Os efeitos são os seguintes:
Grupo de listas personalizadas
A estrutura de bootstrap adiciona dois estilos ao grupo de links:
.List-Group-Item-Heading: Usado para definir o estilo do cabeçalho do item da lista
.List-Group-Item-Text: Usado para definir o conteúdo principal do item da lista
A maior função desses dois estilos é ajudar os desenvolvedores a personalizar o conteúdo no item da lista
Princípio de implementação:
Esses dois estilos controlam principalmente a cor do texto no estado incompatível. A seguir, o código -fonte do CSS:
A.List-Group-Item.List-Group-Item-Heading {Color: #333;}. herdar;}. .LIST-GROUP-ITEM-ITEM, .LIST-GROUP-ITEM.Active: Focus .List-Group-Item-Heading, .List-group-item.Active .List-Group-Item-Heading> Small, .List-group-Item.Active: Focus .List-Group-Item-Grupo> Small, o grupo-group-Mem.Active. .List-Grupo-Item-Heading> .Small, .List-group-item.Active: Hover .List-Group-Item-Heading> .small, .List-Group-iteM.Active: Focus .List-group-ite-Item. .List-group-itex-text, .list-group-item.active: focus .list-group-itex-text {color: #e1edf7;}.Uso de grupos de listas personalizadas
<h1>Custom list group</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content Lista 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo Lista
Configurações de status para itens de lista
A estrutura de bootstrap também fornece efeitos estaduais para combinar itens da lista, especialmente os grupos de listas de vinculação. O método de implementação é semelhante aos componentes introduzidos acima. No grupo de lista, você só precisa adicionar nomes de classe aos itens de lista correspondentes: .Active (representando o estado atual), .Disabled (representando o estado com deficiência)
Princípio de implementação:
Em termos de estilo, a cor de fundo e o texto do item da lista são denominados principalmente. A seguir, o código -fonte do CSS:
.List-group-item.disabled, .list-group-tem.disabled: hover, .list-group-item.disabled: focus {color: #777; background-color: #eee;}. #428BCA; Border-Color: #428BCA;}exemplo:
<h1>List group status settings</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content Lista 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Lista de conteúdo 6 Conteúdo
O efeito é o seguinte (o terceiro item da lista está desativado. Há um ícone de desativar quando o mouse é movido. Aqui está uma captura de tela direta, e esse efeito não pode ser visto):
Grupo de lista colorida
O componente do grupo de lista é o mesmo que o componente de aviso. O Bootstrap fornece diferentes cores de fundo e cores de texto para diferentes estados. Você pode usar esses nomes de classe para definir itens de lista com diferentes cores de fundo:
.List-group-item-success: sucesso verde (cor de fundo) .list-group-item-info: Informação azul (cor de fundo).-List-group-i-i-Sarning: Aviso amarelo (cor de fundo).-List-group-itens Danger: Erro Red (cor de fundo)
Princípio de implementação:
Esses nomes de classe apenas modificam a cor do plano de fundo e o texto, e o código -fonte correspondente é o seguinte:
.List-group-item-success {color: #3C763D; Background-Color: #dff0d8;} a.list-group-item-success {color: #3c763d;} a.list-group-item-sucess .list-group-heading {color: color: Herite;} a.list-group-item-success: pairar, a.list-group-item-success: focus {color: #3c763d; cor de fundo: #d0e9c6;} a.list-group-item-sucess.active, a.list-group-item-suct.active: a.list-sucess.Active, a.list-group-iteem-sucs.active: a.list, a.list.list {a.list-group-item-suct.active: a.list-sucess.Active, a.list-group-iteem-suct.active: a.list, a.list.list {a.list-grup-grupo #FFF; Background-Color: #3C763D; Border-Color: #3C763D;}Para outros códigos de estilo de estado, verifique o arquivo de código -fonte. Se você deseja adicionar a cor de fundo ao item da lista, basta adicionar o nome da classe correspondente à classe.lis-group-item.
Uso de grupos de listas coloridas:
<h1> Grupo de lista colorida </h1> <ul> <a href = "#"> Lista Item1 <span> 10 </span> </a> <a href = "#"> listar Item1 <pan> 10 </span> </a> <a href = "#"# href = "#"> Lista Item1 <span> 10 </span> </a> </ul>
Os efeitos são os seguintes: