bootstrap学习笔记 Bootstrap 列表组

本文将介绍列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

向元素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>

本节完。