价格表是销售产品或服务的任何网站的主要成分之一。即使 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. thinkphp学习笔记8—命名空间

    原文:thinkphp学习笔记8-命名空间 新版本(3.2)中采用命名空间的方式定义和加载类库文件,解决多个模块之间的冲突问题,并实现了更加高效的自动加载机制. 需要给类库定义所在的命名空间,命名空间 ...

  2. unity3d 学习笔记_____Native2d 刚体、冲击、联合使用

    Mass Mass of the rigidbody. Linear Drag Drag coefficient affecting positional movement. Angular Drag ...

  3. GCD（1222）Wolf and Rabbit

    Problem Description There is a hill with n holes around. The holes are signed from 0 to n-1. A rabbi ...

  4. 第23章 访问者模式（Visitor Pattern）

    原文 第23章 访问者模式(Visitor Pattern) 访问者模式 导读:访问者模式是我个人认为所有行为模式中最为复杂的一种模式了,这个模式可能看一遍会看不懂,我也翻了好几个例子,依然不能很好的 ...

  5. TableLayout中stretchColumns、shrinkColumns的使用方法

    android:stretchColumns="1" android:shrinkColumns="1"这两个属性是TableLayout所特有的,也是这两个属 ...

  6. Android4.4 Framework分析——startService创建过程

    我们经常使用context.startService()要启动service.下面就来分析这service启动过程,下图是service启动序列图: watermark/2/text/aHR0cDov ...

  7. Ubuntu下一个openldapserver部署步骤

    1:安装zlib 下载zlib-1.2.3.tar.gz(或其它版本号) wget http://down1.chinaunix.net/distfiles/zlib-1.2.3.tar.gz # . ...

  8. CSharp设计模式读书笔记（23）：模板方法模式(学习难度：★★☆☆☆，使用频率：★★★☆☆)

    模板方法模式:定义一个操作中算法的框架,而将一些步骤延迟到子类中.模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模式角色与结构: 实现代码: using System; ...

  9. 编程算法 - 切割排序 代码(C)

    切割排序 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 排序切割, 把一个数组分为, 大于k\小于k\等于k的三个部分. 能够使用高速排序的Parti ...

  10. [VirtualBox] - Install Oracle Linux 7 on Oracle VirtualBox

    I'll start coding with JEE soon. Product environment adopts Oracle + WebLogic in Linux, technology a ...