Bootstrap 2 清单组组件创建价格表 - Bootstrap 2 基础教程

价格表是销售产品或服务的任何网站的主要成分之一

虽然 Boortstrap 2 没有直接提供价格表组件，但是它提供了列表组组件

设计该组件的目的是为了渲染复杂的定制内容

本章节我们将创建一个简单的价格表

典型的外观

下面的代码演示了一个列表组组件的基本外观

<div class="container">
  <div class="row">
    <ul class="list-group col-lg-4">
    <li class="list-group-item">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>

运行范例 »

徽章（badges）

我们可以使用 徽章（badges） 组件来包含 list-group

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

运行范例 »

链接项目

<div class="container">
<div class="row">
  <div class="list-group col-lg-4">
  <a href="#" class="list-group-item active">
    The pricing list
  </a>
  <a href="#" class="list-group-item">Unlimited users</a>
  <a href="#" class="list-group-item">Unlimited storage</a>
  <a href="#" class="list-group-item">email support</a>
  <a href="#" class="list-group-item">More...</a>
</div>
</div>
</div>

运行范例 »

自定义内容

下面的范例演示了带有自定义内容的列表组

<div class="container">
<div class="row">
  <div class="list-group col-lg-4">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>
</div>
</div>

运行范例 »

价格表

现在我们将采取列表组组件的节本结构，并把它转换成一个简单而有吸引力的价格表

下面的范例包含我们用于创建价格表的基本 HTML 代码

请注意，我们已经在最后一个列表项内添加按钮

对于最左边和最右边的列，我们使用 Bootstrap 的默认按钮

对于中间的列，我们添加带有不同的 class（warning）的按钮，使它看起来与众不同

此外，我们还在中间列的第一个列表项中添加了一个徽章

<div class="container">
  <div class="row">
    <ul class="list-group col-lg-4">
      <li class="list-group-item">Bronze Package</li>
      <li class="list-group-item">Unlimited users</li>
      <li class="list-group-item">Unlimited storage</li>
      <li class="list-group-item">Forum Support</li>
      <li class="list-group-item">$9/Month</li>
      <li class="list-group-item"><a href="#"><button class="btn btn-lg btn-default">Buy Now</button></a></li>
  </ul>
<!--second-->
<ul class="list-group col-lg-4">
  <li class="list-group-item">Gold Package<span class="badge">Most Preferred</span></li>
  <li class="list-group-item">Unlimited users</li>
  <li class="list-group-item">Unlimited storage</li>
  <li class="list-group-item">24X7 Support</li>
  <li class="list-group-item">$25/Month</li>
  <li class="list-group-item"><a href="#"><button class="btn btn-warning btn-lg">Buy Now</button></a></li>
</ul>
<!--third-->
<ul class="list-group col-lg-4">
  <li class="list-group-item">Silver Package</li>
  <li class="list-group-item">Unlimited users</li>
  <li class="list-group-item">Unlimited storage</li>
  <li class="list-group-item">email support</li>
  <li class="list-group-item">$15/Month</li>
  <li class="list-group-item"><a href="#"><button class="btn btn-lg btn-default">Buy Now</button></a></li>
</ul>
</div>
</div>

运行范例 »

现在，我们将通过添加 CSS class 来直接定制外观和感观

CSS 代码的第一个片段会添加一些的顶部填充到页面中

body {
  padding-top: 70px
  }

然后，通过添加下面的 CSS 代码，我们将定制背景颜色，字体颜色，文本对齐方式和列表项内容的字体尺寸

ul.list-group.col-lg-4 > li {
  background-color: #c952ca;
  color: white;
  text-align: center;
  font-size:125%;
}

但如果我们想让中间列的第一个列表项看起来与众不同，我们需要添加下面的 CSS 代码

我们使用 :first-child 伪元素来访问所需的列表项

ul.list-group.col-lg-4 > li.list-group-item:first-child{
  background-color: #64086f;
  font-size: 200%; 
}

为了让徽章显得与众不同，我们再添加下面的 CSS 代码

.badge {
  background-color: #FAFAD2;
  color:#FF8C00;
  }

运行范例 »