bootstrap學習筆記 Bootstrap 列表組

浪花一朵朵發表於2015-05-21
boot筆記

本文將介紹列表組。列表元件用於以列表形式呈現複雜的和自定義的內容。建立一個基本的列表組的步驟如下：

 向元素ul 新增class list-group

向li新增class list-group-item

下面的示例演示了這點：

HTML

<ul class="list-group">
    <li class="list-group-item">免費註冊域名</li>
    <li class="list-group-item">免費windows空間託管</li>
    <li class="list-group-item">託管的數量</li>
    <li class="list-group-item">24*7 支援</li>
   <li class="list-group-item">每年更新成本</li>
</ul>

向列表組中新增徽章

我們可以向任意的列表項新增徽章元件，它會自動定位到右邊。只需要在li元素中新增 span class=badge即可。下面的示例演示了這一點：

HTML

<h2>新增徽章</h2>
<ul class="list-group">
    <li class="list-group-item">免費註冊域名</li>
    <li class="list-group-item">免費windows空間託管</li>
    <li class="list-group-item">託管的數量</li>
    <li class="list-group-item">24*7 支援</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>

向列表組新增連結

通過用錨標籤代替列表項，我們可以向列表組新增連結。我們需要使用div代替ul元素。下面的示例和效果演示了這一點：

先看效果：

HTML

<h4>列表組中的連結</h4>
<div>
    <a href="#" class="list-group-item">免費域名註冊</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>
</div>

向列表組新增自定義內容

我們可以向上面新增連結的列表任意的html內容。下面的示例演示了這點：

效果：

html

<h4>列表組中的自定義內容</h4>
<ul class="list-group">
    <li class="list-group-item active">
        <h4 class="list-group-item-heading">入門網站包</h4>
        <p>你將通過網頁進行免費域名註冊</p>
    </li>
    <li class="list-group-item">
        <h4 class="list-group-item-heading">24*7 支援</h4>
        <p>我們提供24*7 支援</p>
    </li>
    <li class="list-group-item">
        <h4 class="list-group-item-heading">商務網站包
        </h4>
    </li>
    <li class="list-group-item">託管的數量</li>
</ul>

本節完。

相關文章