bootstrap学习笔记 Bootstrap 列表组

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

向元素ul 添加class list-group

向li添加class list-group-item

下面的示例演示了这点:

bootstrap学习笔记 Bootstrap 列表组

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即可。下面的示例演示了这一点:

bootstrap学习笔记 Bootstrap 列表组

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元素。下面的示例和效果演示了这一点:

先看效果:

bootstrap学习笔记 Bootstrap 列表组

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内容。下面的示例演示了这点:

效果:

bootstrap学习笔记 Bootstrap 列表组

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>

本节完。

上一篇:关于ADC采集


下一篇:bootstrap列表组的使用