Bootstrap 使用清单组组件创建价格表

价格表是销售产品或服务的任何网站的主要成分之一。即使 Boortstrap 3（与之前的版本一样）没有直接提供价格表组件，但是它提供了列表组组件。设计该组件的目的是为了渲染复杂的定制内容。利用这个特征，我们将在本教中创建 一个简单的价格表，并解释制作一个列表组所用到的 CSS 规则，并说明如何定制它。

实例代码如下:

.list-group {
padding-left: 0;
margin-bottom: 20px;
}

.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}

.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}

.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

View Code

徽章（badges）

<div class="container">
<div class="row">
<ul class="list-group col-lg-4">
<li class="list-group-item"><span class="badge">Very important</span>Unlimited Users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">Forum support</li>
<li class="list-group-item">More....</li>
<li class="list-group-item">More.....</li>
</ul>
</div>
</div>

效果如图:



徽章css样式

.list-group-item > .badge {
float: right;
}

.list-group-item > .badge + .badge {
margin-right: 5px;
}