Lista de estilo de grupo no bootstrap 5
Como criar um grupo de lista
Para criar uma lista, faça uma lista não ordenada e atribua o
- elemento o .Grupo de lista classe e atribua cada item de lista o .List-Group-Item aula.
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Html
O código acima gerará um grupo de lista que consiste em três itens de lista.
Saída
A saída acima mostra um grupo de lista básica.
Como atribuir estados ativos e deficientes a um grupo de lista
Se você deseja definir o estado ativo para um item de lista atual e um estado desativado para um item não clicável, basta atribuir o respectivo item de lista os estados ativos e desativados.
Html
Aqui atribuímos um estado ativo ao primeiro item e um estado desativado ao terceiro item. O estado desativado simplesmente não torna um item vinculado sem fusão, mas também elimina o efeito do pairar.
Saída
É assim que você atribui estados ativos e deficientes para listar itens em um grupo de lista.
Como atribuir links para listar itens em um grupo de lista
Se você deseja redirecionar seu usuário para outra página ou fonte da web usando itens em um grupo de lista, em vez de fazer uma lista não ordenada, faça uma div e atribua -a a .Grupo de lista classe e aninham todos os links presentes nas etiquetas de âncora dentro daquela div. Além disso, atribua o .Items-group-group, e .List-Group-Item-Ação Classes para as tags de ancoragem presentes dentro da div.
Html
Item 1
Item 2
Item 3
O grupo de lista criado quando o código acima for executado será pairável e cada item do grupo estará vinculado a outra fonte.
Saída
Os itens da lista foram vinculados com sucesso.
Como criar um grupo de lista sem fronteiras
Se você deseja remover as fronteiras de um grupo de lista, basta atribuir o .List-Group-Flush classe para o
- elemento junto com o .Grupo de lista aula.
Html
O código acima gerará um grupo de lista sem fronteiras.
Saída
É assim que você cria um grupo de lista sem fronteiras.
Como numerar itens em um grupo de lista
Com o objetivo de numerar os itens em um grupo de lista, use o .Número de grupo de listas aula.
Html
O trecho de código declarado acima dará números a cada um dos itens presentes dentro da div.
Saída
Os itens da lista foram numerados.
Como alinhar um grupo de lista horizontalmente
Um grupo de lista por padrão está alinhado verticalmente, mas se você preferir alinhá -lo horizontalmente, use o .List-Group-Horizontal aula.
Html
O .A classe list-group-horizontal foi atribuída ao
- elemento junto com o .Classe de grupo de listas, portanto, o grupo de lista gerado como resultado será alinhado horizontalmente.
Saída
A saída exibe um grupo de lista horizontal.
Como listar os itens de listar em um grupo de lista
Uma coisa divertida que você faz para tornar seu grupo de lista elegante é usar as classes de utilitário de cores para fornecer cores para listar itens do grupo de lista.
Html
Há um total de 5 itens de lista gerados no código acima e cada um desses itens foi atribuído uma cor diferente usando o .List-Group-Item-Primary, .List-Group-Item-Warning, .List-Group-Item-Info, .List-Group-Item-Success, e .List-Group-Item Danger classes respectivamente.
Saída
A saída mostra itens de lista coloridos.
Se você deseja criar itens de lista vinculados e fornecer cores também, siga o trecho de código abaixo.
Html
Item 1
Item 2
Item 3
Item 4
Item 5
Para vincular os itens da lista, estamos simplesmente criando um contêiner div e aninhando várias tags de ancoragem dentro daquele contêiner que vincularão os itens da lista. Além disso, cada link recebeu uma cor diferente.
Saída
O grupo de lista mostrado acima possui itens de lista coloridos e vinculados.
Conclusão
Um grupo de listas pode ser estilizado usando várias classes Bootstrap 5, por exemplo .List-Group-Flush Cria um grupo de lista sem fronteiras, .Número de grupo de listas fornece número aos itens do grupo de lista e .List-Group-Horizontal alinhe um grupo de lista horizontalmente. Além disso, para fornecer cores aos itens de um grupo de lista, use as classes de cores associadas a grupos de listas como .List-Group-Item-Primary, .List-Group-Item-Info, .List-Group-Item Danger, etc. Isso e muito mais sobre a criação e o estilo de grupo de listas foi discutido neste blog.