关于Bootstrap 列表组用法

关于Bootstrap 列表组用法

向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。

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

1，向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可。下面的实例演示了这点：

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

2，向列表组添加链接

通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <a> 代替 <li> 元素。下面的实例演示了这点

<a href="#" class="list-group-item active">

    免费域名注册

</a>

<a href="#" class="list-group-item">www.shiguangbiaoye.com</a>

<a href="#" class="list-group-item">免费 Window 空间托管</a>

<a href="#" class="list-group-item">图像的数量</a>

<a href="#" class="list-group-item">每年更新成本</a>

3，向列表组添加自定义内容

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

4，水平列表

.list-group-horizontal .list-group-item {

    display: inline-block;

}

.list-group-horizontal .list-group-item {

    margin-bottom: 0;

    margin-left:-4px;

    margin-right: 0;

}

.list-group-horizontal .list-group-item:first-child {

    border-top-right-radius:0;

    border-bottom-left-radius:4px;

}

.list-group-horizontal .list-group-item:last-child {

    border-top-right-radius:4px;

    border-bottom-left-radius:0;

}

 

<ulclass="list-group"><liclass="list-group-item">免费域名注册</li><liclass="list-group-item">免费 Window 空间托管</li><liclass="list-group-item">图像的数量</li><liclass="list-group-item">24*7 支持</li><liclass="list-group-item">每年更新成本</li></ul>