Bootstrap 列表組


本章我們將講解列表組。列表元件用於以列表形式呈現複雜的和自訂的內容。建立一個基本的清單群組的步驟如下：

  • 向元素 <ul> 新增 class .list-group。

  • 向 <li> 新增 class .list-group-item。

下面的實例示範了這一點：

實例

<!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>

##執行實例»點擊"運行實例" 按鈕查看線上實例

#為清單群組新增徽章

我們可以將徽章元件新增至任意的清單項目，它會自動定位到右邊。只需要在 <li> 元素中加入

<span class="badge"> 即可。下面的實例示範了這一點：

實例

<!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>

#運行實例»##點擊"運行實例" 按鈕查看線上實例

向列表組新增連結

透過使用錨定標籤代替列表項，我們可以向列表組新增連結。我們需要使用 <div> 來代替 <ul> 元素。下面的實例示範了這點：

結果如下所示：

實例

#
<!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>

##執行實例»

點擊"運行實例" 按鈕查看在線實例

向列表組添加自訂內容

我們可以向上面已添加鏈接的列表組添加任意的HTML 內容。下面的實例示範了這一點：

實例

<!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>

#運行實例»
##點擊"運行實例" 按鈕查看線上實例
←
→