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

效果如图:

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;

}

徽章（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;

}

Bootstrap 使用清单组组件创建价格表的更多相关文章

  1. BootStrap dateRangePicker时间范围控件

    BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...

  2. win7 UAC bypass（微软已经给予了三组组件绕过UAC启动的特权）

    fireworm同学的翻译: 原文在http://www.pretentiousname.com/misc/win7_uac_whitelist2.html我只翻译了其中关于原理的一小部分,有兴趣的可 ...

  3. 通过WinForm控件创建的WPF控件无法输入的问题

    今天把写的一个WPF程序发布到别的机器上执行,发现一个比较奇怪的问题:在那个机器上用英文输入法无法输入数字,非要切换到中文输入法才行:但在我的机器上却是好好的. 最开始以为是输入法的问题,弄了好一阵子 ...

  4. SNF开发平台WinForm之三-开发-单表选择控件创建-SNF快速开发平台3.3-Spring.Net.Framework

    3.1运行效果: 3.2开发实现: 3.2.1 这个开发与第一个开发操作步骤是一致的,不同之处就是在生成完代码之后,留下如下圈红程序,其它删除. 第一个开发地址:开发-单表表格编辑管理页面 http: ...

  5. DuiLib（二）——控件创建

    上一篇讲了窗口及消息,了解了大体的程序框架.这一篇说的是控件的创建. duilib支持XML配置文件,即根据XML创建窗口及控件,将界面与逻辑分开,便于修改及维护.上一篇的示例中可以看到在消息WM_C ...

  6. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  7. 通过C# WinForm控件创建的WPF WIndow窗口控件无法输入的问题

    原文:通过WinForm控件创建的WPF 控件无法输入的问题 今天把写的一个WPF程序发布到别的机器上执行,发现一个比较奇怪的问题:在那个机器上用英文输入法无法输入数字,非要切换到中文输入法才行:但在 ...

  8. vue和bootstrap的select控件貌似有冲突？

    貌似vue和bootstrap的select控件会冲突,因为bootstrap的select控件会将option替换为<a>标签,这样就会导致vue渲染失败.(这个问题让我整了一个上午,最 ...

  9. bootstrap的时间控件使用(双日历)

    这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅... 废话不多说先上效果图 接下来是代码实现 第一步当然是导入css.js ...

随机推荐

  1. shell脚本操作数据库

    #!/bin/bash HOST_NAME="localhost" PORT=3306 USERNAME="root" PASSWORD="root& ...

  2. Javascipt数组去重的几种方式

    方法一 function unique(arr) { var retArr = []; for (var i = 0; i < arr.length; i++) { (retArr.indexO ...

  3. 《学习opencv》笔记——矩阵和图像处理——cvAnd、cvAndS、cvAvg and cvAvgSdv

    矩阵和图像的操作 (1)cvAnd函数 其结构 void cvAnd( //将src1和src2按像素点取"位与运算" const CvArr* src1,//第一个矩阵 cons ...

  4. zoj3791(An Easy Game) DP

    意甲冠军:给定两个01弦s1,s2.每一个变化s1在m字 - 位.要求k制作步骤之后s1变s2有多少种方法. 解法:DP,关键是状态的设计.考虑还是唯一性和可传递性.dp[i][j]表示第i步后有j个 ...

  5. neu1458 方格取数 dp解法

    题意: 有N * N个格子,每一个格子里有正数或者0,从最左上角往最右下角走,仅仅能向下和向右,一共走两次(即从左上角走到右下角走两趟),把全部经过的格子的数加起来,求最大值SUM,且两次假设经过同一 ...

  6. git branch(转)

    git branch    git branch 不带参数:列出本地已经存在的分支,并且在当前分支的前面加“*”号标记,例如:   #git branch* master   newbranch gi ...

  7. SQL随着子查询结果更新多个字段

    笔者:iamlasong 要求:表格内容需要改变,在临时表中内容的变化,使用SQL官方声明更新表若干领域. 假设更新一个字段,直接用字段名=子查询就能够了,多个字段更新,将字段在括号里并列写出就可以, ...

  8. Nyoj 天下第一(spfa)

    描述 AC_Grazy一直对江湖羡慕不已,向往着大碗吃肉大碗喝酒的豪情,但是“人在江湖漂,怎能 不挨刀",”人在江湖身不由己",如果自己的武功太差,在江湖会死的很惨,但是AC_Gr ...

  9. SQL Server编程系列(2):SMO常用对象的有关操作

    原文:SQL Server编程系列(2):SMO常用对象的有关操作 在上一篇周公简单讲述了SMO的一些基本概念,实际上SMO体系结构远不止周公在上一篇中讲述的那么简单,下图是MSDN上给出的一个完整的 ...

  10. AT&amp;T汇编——在你开始写

    不知不觉,少年将超过,计算机相关知识,学到基本上可以说是教过.毕业.所以,我们打算更深入了解自己的兴趣背着背笼.也因为它是检讨大学. 计划写的内容在: 1.汇编语言 2.C/C++语言 3.Linux ...