Groupe de liste d'amorçage


Dans ce chapitre, nous expliquerons les groupes de listes. Le composant liste est utilisé pour présenter du contenu complexe et personnalisé sous la forme d’une liste. Les étapes pour créer un groupe de listes de base sont les suivantes :

  • Ajoutez la classe .list-group à l'élément <ul>.

  • Ajouter la classe .list-group-item à <li>.

L'exemple suivant le démontre :

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的列表组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
	<li class="list-group-item">免费域名注册</li>
	<li class="list-group-item">免费 Window 空间托管</li>
	<li class="list-group-item">图像的数量</li>
	<li class="list-group-item">24*7 支持</li>
	<li class="list-group-item">每年更新成本</li>
</ul>


</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Ajoutez un badge au groupe de liste

Nous pouvons ajouter un composant de badge à n'importe quel élément de la liste et il le fera automatiquement positionné à droite. Ajoutez simplement <span class="badge"> à l'élément <li> L'exemple suivant le démontre :

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向列表组添加徽章</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
	<li class="list-group-item">免费域名注册</li>
	<li class="list-group-item">免费 Window 空间托管</li>
	<li class="list-group-item">图像的数量</li>
	<li class="list-group-item">
		<span class="badge">新</span>
		24*7 支持
	</li>
	<li class="list-group-item">每年更新成本</li>
	<li class="list-group-item">
		<span class="badge">新</span>
		折扣优惠
	</li>
</ul>


</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher Exemple en ligne

Ajouter un lien vers un groupe de listes

En utilisant des balises d'ancrage au lieu d'éléments de liste, nous pouvons ajouter des liens vers des groupes de listes. Nous devons utiliser l'élément <div> L'exemple suivant le démontre :

Le résultat ressemble à ceci :

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向列表组添加链接</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<a href="#" class="list-group-item active">
	免费域名注册
</a>
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>


</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Ajouter du contenu personnalisé au groupe de liste

Nous pouvons ajouter du contenu HTML arbitraire au groupe de liste qui a été lié ci-dessus. L'exemple suivant le démontre :

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向列表组添加自定义内容</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">
			入门网站包
		</h4>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">
			免费域名注册
		</h4>
		<p class="list-group-item-text">
			您将通过网页进行免费域名注册。
		</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">
			24*7 支持
		</h4>
		<p class="list-group-item-text">
			我们提供 24*7 支持。
		</p>
	</a>
</div>
<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">
			商务网站包
		</h4>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">
			免费域名注册
		</h4>
		<p class="list-group-item-text">
			您将通过网页进行免费域名注册。
		</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">24*7 支持</h4>
		<p class="list-group-item-text">我们提供 24*7 支持。</p>
	</a>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher Exemple en ligne