Kumpulan senarai Bootstrap


Dalam bab ini kami akan menerangkan kumpulan senarai. Komponen senarai digunakan untuk mempersembahkan kandungan kompleks dan tersuai dalam bentuk senarai. Langkah-langkah untuk mencipta kumpulan senarai asas adalah seperti berikut:

  • Tambah kelas .list-group pada elemen <ul>.

  • Tambah kelas .list-group-item ke <li>.

Contoh berikut menunjukkan ini:

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 Running»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Tambah lencana pada kumpulan senarai

Kami boleh menambah komponen lencana pada mana-mana item senarai dan ia akan secara automatik diletakkan ke kanan. Cuma tambah <span class="lencana"> pada elemen <li> Contoh berikut menunjukkan ini:

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>

Run Instance»

Klik butang "Run Instance" untuk melihat Contoh Dalam Talian

Tambah Pautan ke Kumpulan Senarai

Dengan menggunakan tag anchor dan bukannya item senarai, kami boleh menambah pautan ke kumpulan senarai. Kita perlu menggunakan <div> dan bukannya elemen <ul> Contoh berikut menunjukkan ini:

Hasilnya kelihatan seperti ini:

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>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Tambah kandungan tersuai pada kumpulan senarai

Kami boleh menambah kandungan HTML sewenang-wenangnya pada kumpulan senarai yang mempunyai telah dipautkan di atas. Contoh berikut menunjukkan ini:

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>

Run Instance»

Klik butang "Run Instance" untuk melihat Contoh Dalam Talian