Bootstrap 基礎教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦
Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設備
Bootstrap 響應式實用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導航欄
Bootstrap 導航元素
Bootstrap 多媒體對象（Media Object）
Bootstrap 分頁
Bootstrap 徽章（Badges）
Bootstrap 進度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁面標題（Page Header）
Bootstrap 字體圖標(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標簽頁（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導航（Affix）
Bootstrap 滾動監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
文字
Bootstrap 列表組
本章我們將講解列表組。列表組件用于以列表形式呈現(xiàn)復雜的和自定義的內(nèi)容。創(chuàng)建一個基本的列表組的步驟如下：
- 向元素 <ul> 添加 class .list-group。
- 向 <li> 添加 class .list-group-item。
下面的實例演示了這點：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 基本的列表組</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/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">圖像的數(shù)量</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>
<title>Bootstrap 實例 - 向列表組添加徽章</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/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">圖像的數(shù)量</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>
折扣優(yōu)惠
</li>
</ul>
</body>
</html>
結果如下所示：
向列表組添加鏈接
通過使用錨標簽代替列表項，我們可以向列表組添加鏈接。我們需要使用 <div> 代替 <ul> 元素。下面的實例演示了這點：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 向列表組添加鏈接</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/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">圖像的數(shù)量</a> <a href="#" class="list-group-item">每年更新成本</a> </body> </html>
結果如下所示：
向列表組添加自定義內(nèi)容
我們可以向上面已添加鏈接的列表組添加任意的 HTML 內(nèi)容。下面的實例演示了這點：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 向列表組添加自定義內(nèi)容</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">
入門網(wǎng)站包
</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
免費域名注冊
</h4>
<p class="list-group-item-text">
您將通過網(wǎng)頁進行免費域名注冊。
</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">
商務網(wǎng)站包
</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
免費域名注冊
</h4>
<p class="list-group-item-text">
您將通過網(wǎng)頁進行免費域名注冊。
</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>
結果如下所示：
