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

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

实例代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../bootstrap/v3/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style type="text/css">
  body {
  padding-top: 70px
  }
  ul.list-group.col-lg-4 > li {
  background-color: #c952ca;
  color: white;
  text-align: center;
  font-size:125%;
  }
  ul.list-group.col-lg-4 > li.list-group-item:first-child{
  background-color: #64086f;
  font-size: 200%; 
  }
  .badge {
  background-color: #FAFAD2;
  color:#FF8C00;
  }
  </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  <link rel="stylesheet" href="/csshide1.css"/>
<link rel="stylesheet" href="/csshide2.css"/>
<link rel="stylesheet" href="/csshide3.css"/>
<link rel="stylesheet" href="/csshide4.css"/>
<style></style >
<link rel="stylesheet" href="/abprule.css"/>
<style></style  >
<style></style>
<script type="text/javascript">window.onerror=function(){return true;}</script></head>
  <body>
  <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>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bootstrap/v3/dist/js/bootstrap.min.js"></script>
  </body>
</html>
View Code

效果如图:

bootstrap提供的列表的典型外观

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

效果如图:

引用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;
}

 

 

 

posted @ 2014-05-07 15:33  石奈子0314  阅读(815)  评论(0)  编辑  收藏  举报