Bootstrap 列表組
Basic List Groups
The most basic list group is an unordered list with list items
- First item
- Second item
- Third item
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item
示例
<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>
自己動手試一試 »
帶有徽章的列表組
您也可以向列表組新增徽章。徽章將自動放置在右側
- 12 新
- 5 刪除
- 3 警告
要建立徽章，請在列表項內建立一個帶有 .badge 類的 <span> 元素
示例
<ul class="list-group">
<li class="list-group-item">新 <span class="badge">12</span></li>
<li class="list-group-item">刪除 <span class="badge">5</span></li>
<li class="list-group-item">警告 <span class="badge">3</span></li>
</ul>
自己動手試一試 »
List Group With Linked Items
列表組中的專案也可以是超連結。這將在滑鼠懸停時新增一個灰色背景色
要建立帶有連結項的列表組，請使用 <div> 而不是 <ul>，並使用 <a> 而不是 <li>
示例
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
自己動手試一試 »
Active State
Use the .active class to highlight the current item
示例
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
自己動手試一試 »
Disabled Item
以下列表組包含一個停用項
要停用一個專案，請新增 .disabled 類
示例
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
自己動手試一試 »
Contextual Classes
可以使用上下文類來為列表項著色
- First item
- Second item
- Third item
- Fourth item
用於為列表項著色的類是： .list-group-item-success、list-group-item-info、list-group-item-warning 和 .list-group-item-danger
示例
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
自己動手試一試 »
自定義內容
您幾乎可以在列表組項中包含任何 HTML。
Bootstrap 提供了 .list-group-item-heading 和 .list-group-item-text 類，它們可以按如下方式使用
示例
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
自己動手試一試 »
