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

Bootstrap4 Tutoriel de base

Bootstrap4 Groupe de liste

Les groupes de listes sont des composants très utiles et flexibles, utilisés pour afficher des listes d'éléments de manière belle. Dans sa forme la plus basique, le groupe de liste n'a que .list-Liste non ordonnée de la classe group, tandis que les éléments de liste ont .list-group-Classe item.

La plupart des groupes de listes de base sont non ordonnés.

To create a list group, you can add .list to the <ul> element-group class, in Add .list to the <li> element-group-item class:

<!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>Basic list group</h2>
　　<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>
</div>
</body>
</html>
Voyons un test ‹/›

The effect after running is as follows:

Active state list item

To set the active state list item, add .active class:

<!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>Active state list item</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item active">Active item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>
Voyons un test ‹/›

Disabled list item

.disabled class is used to set disabled list items:

<!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>Disabled list item</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item disabled">Disabled item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>
Voyons un test ‹/›

Link list item

To create a link list item, you can replace <ul> with <div> Replace <a> with <li>. If you want to display a gray background when hovering over the mouse, add .list-group-item-action class:

<!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>Link list item</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">First item</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Second item</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Third item</a>
　　</div>
</div>
</body>
</html>
Voyons un test ‹/›

Multiple color list items

The color of the list items can be set by the following list: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark and 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>Éléments de liste de multiples couleurs</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item　list-group-item-success">Élément de liste réussi</li>
　　　　<li class="list-group-item　list-group-item-secondary">Élément de liste secondaire</li>
　　　　<li class="list-group-item　list-group-item-info">Élément de liste d'information</li>
　　　　<li class="list-group-item　list-group-item-warning">Élément de liste d'avertissement</li>
　　　　<li class="list-group-item　list-group-item-danger">Élément de liste dangereux</li>
　　　　<li class="list-group-item　list-group-item-primary">Élément de liste principal</li>
　　　　<li class="list-group-item　list-group-item-dark">Élément de liste foncé</li>
　　　　<li class="list-group-item　list-group-item-light">Élément de liste clair</li>
　　</ul>
</div>
</body>
</html>
Voyons un test ‹/›

链接的多种颜色列表项

<!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>Éléments de liste de multiples couleurs</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Élément de liste activé</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-success">Élément de liste réussi</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-secondary">Élément de liste secondaire</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-info">Élément de liste d'information</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-warning">Élément de liste d'avertissement</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-danger">Élément de liste dangereux</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-primary">Élément de liste principal</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-dark">Élément de liste foncé</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-light">Élément de liste clair</a>
　　</div>
</div>
</body>
</html>
Voyons un test ‹/›
Bootstrap4 CarteBootstrap4 Pagination