English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Tutorial Básico

Bootstrap4 Grupo de listas

Os grupos de listas são componentes muito úteis e flexíveis, usados para exibir listas de elementos de forma bonita. Na forma mais básica, o grupo de listas é apenas .list-lista não ordenada da classe group, enquanto os itens da lista têm .list-group-classe item.

A maioria dos grupos de listas básicas são desordenados.

Para criar um grupo de lista, você pode adicionar .list ao elemento <ul>-classe group, em Adicione .list ao elemento <li>-group-classe item:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Grupo de lista básico</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item">Primeiro item</li>
　　　　<li class="list-group-item">Segundo item</li>
　　　　<li class="list-group-item">Terceiro item</li>
　　</ul>
</div>
</body>
</html>
Teste Veja ‹/›

O efeito após a execução será o seguinte:

Item ativo

Para definir itens de lista ativos, adicione a classe .active:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Item ativo</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item active">Item ativo</li>
　　　　<li class="list-group-item">Segundo item</li>
　　　　<li class="list-group-item">Terceiro item</li>
　　</ul>
</div>
</body>
</html>
Teste Veja ‹/›

Item de lista desativado

A classe .disabled é usada para definir itens de lista desativados:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Item de lista desativado</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item disabled">Item desativado</li>
　　　　<li class="list-group-item">Segundo item</li>
　　　　<li class="list-group-item">Terceiro item</li>
　　</ul>
</div>
</body>
</html>
Teste Veja ‹/›

Item de lista de links

Para criar um item de lista de links, você pode substituir <ul> por <div> ， <a> substitui <li>。Se você quiser exibir um fundo cinza ao passar o mouse, adicione .list-group-item-classe action:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Item de lista de links</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Primeiro item</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Segundo item</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Terceiro item</a>
　　</div>
</div>
</body>
</html>
Teste Veja ‹/›

多种颜色列表项

列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark e list-group-item-light:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Itens de Lista de Diversas Cores</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item　list-group-item-success">Item de Lista de Sucesso</li>
　　　　<li class="list-group-item　list-group-item-secondary">Item de Lista Secundário</li>
　　　　<li class="list-group-item　list-group-item-info">Item de Lista de Informação</li>
　　　　<li class="list-group-item　list-group-item-warning">Item de Lista de Aviso</li>
　　　　<li class="list-group-item　list-group-item-danger">Item de Lista Perigoso</li>
　　　　<li class="list-group-item　list-group-item-primary">Item de Lista Principal</li>
　　　　<li class="list-group-item　list-group-item-dark">Item de Lista Escuro</li>
　　　　<li class="list-group-item　list-group-item-light">Item de Lista Claro</li>
　　</ul>
</div>
</body>
</html>
Teste Veja ‹/›

链接的多种颜色列表项

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Itens de Lista de Diversas Cores</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Item de Lista Ativo</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-success">Item de Lista de Sucesso</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-secondary">Item de Lista Secundário</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-info">Item de Lista de Informação</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-warning">Item de Lista de Aviso</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-danger">Item de Lista Perigoso</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-primary">Item de Lista Principal</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-dark">Item de Lista Escuro</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-light">Item de Lista Claro</a>
　　</div>
</div>
</body>
</html>
Teste Veja ‹/›
Bootstrap4 CartãoBootstrap4 Navegação de Páginas