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

来源：互联网发布：php登录界面源码编辑：程序博客网时间：2024/04/27 03:53

价格表是销售产品或服务的任何网站的主要成分之一。即使 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;}

0 0