价格表是销售产品或服务的任何网站的主要成分之一。即使 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. ABP应用层——应用服务（Application services）

    ABP应用层——应用服务(Application services) 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之15.ABP应用层——应用服务(Applic ...

  2. 怎样解决chm类型的文件在Windows操作系统中无法打开

    又一次安装了Windows 7操作系统,发现chm文件类型Java API文档无法打开了,纠结了半天最终搞定,现总结一下: 1.选中该chm类型的文件,右键鼠标选择并点击"属性(R)&quo ...

  3. crmplugin项目加入key文件

    通常,办crm的plugin发展,然后dll文件导入系统,都需要加入项目key文件,那么怎么办? 在右上角单击指定项目--属性: 点击属性后,弹出属性编辑框: watermark/2/text/aHR ...

  4. IOS的UITextField,UIButton,UIWebView它描述的一些属性和IOS提示图像资源

    有时UI要开发的资源与实际frame不符.这一次,我们要绘制图片 UIImage* image = [[UIImage imageNamed:@"text_field_bg.png" ...

  5. 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  6. BZOJ 3209 花神的数论题 数位DP+数论

    题目大意:令Sum(i)为i在二进制下1的个数 求∏(1<=i<=n)Sum(i) 一道非常easy的数位DP 首先我们打表打出组合数 然后利用数位DP统计出二进制下1的个数为x的数的数量 ...

  7. XCL-Charts圈图

    我不知道是不是叫图,无论如何,所以叫它. 图形是今天我Circliful这个jQuery 插件上看到的. 认为非常好看. 就想把它实现出来,由于之前画过环形图.且我如今的图表基类基本已成型,所以非常快 ...

  8. LogMaster4Net

    使用LogMaster4Net实现应用程序日志的集中管理 日志在软件系统中的重要性我在此也不赘述了,几乎所有程序员每天都会更日志打交道. 那么你是否曾今为这样的一些事情而困扰过: - 远程登录到不同的 ...

  9. TRILL浅析

    1 TRILL概述 TRILL的全称就是Transparent Interconnection of Lots of Links,顾名思义,其本质就是将非常多条链路透明地组织在一起,以致于上层IP应用 ...

  10. JqueryAjax异步加载在ASP.NET

    前台代码 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">< ...