价格表是销售产品或服务的任何网站的主要成分之一。即使 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. HDU 2159 FATE （完全背包+有限尚需时日）（）双费背包

     FATE Problem Description 近期xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd開始对杀怪产生的厌恶感,但又不得不通过杀怪来升 ...

  2. oracle rac常用的命令

    oracle rac常用的命令 节点层:olsnodes 网络层: oifcfg 集群层:crsctl,ocrcheck,ocrdump,ocrconfig 应用层:srvctl,onsctl,crs ...

  3. 第9章 组合模式（Composite Pattern）

    原文 第9章 组合模式(Composite Pattern) 概述: 组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理 ...

  4. error C3130: 内部编译器错误: 未能将插入的代码块写入PDB

    近期编译cocos2d-x的test突然出现这个错误,又一次编译也无法解决. 一般出现这个错误是两个原因:一个是磁盘空间不足,还有一个是项目太大导致pdb文件太大,无法继续写入. 原本cocos2d- ...

  5. 从Ubuntu12.04升级到Ubuntu 14.04之后，系统将无法启动

    进入Ubuntu启动界面.通常有几个选项,Ubuntu,Ubuntu先进... 输入e键,进入grub的设置界面.将里面的ro改动为rw就可以. 以上能够启动,临时性的设置 可是为了永久保存这个设置, ...

  6. uva 11987 Almost Union-Find （并检查集合）

    标题效果: 三操作. 1. 合并两个集合 2.代替所述第二组的第一个元素 3.输出设置数量,并.. IDEAS: 使用p该元素的记录数,其中集合,建立并查集. #include <cstdio& ...

  7. CSS3之重新定义鼠标右键

    效果图: html: <div id="rightkey"> <ul> <li><img src="images/xmgl.pn ...

  8. CSharp设计模式读书笔记（17）：迭代器模式(学习难度：★★★☆☆，使用频率：★★★★★)

    迭代器模式(Iterator Pattern):提供一种方法来访问聚合对象,而不用暴露这个对象的内部表示,其别名为游标(Cursor). 模式角色与结构: 实现代码: using System; us ...

  9. Webbrowser控件史上最强技巧全集

    原文:Webbrowser控件史上最强技巧全集 Webbrowser控件史上最强技巧全集 VB调用webbrowser技巧集 1.获得浏览器信息: Private Sub Command1_Click ...

  10. vi使用高级

    下面的命令在vi命令模式被激活 h 光标左移一个字符 l 光标向右移动一个字符 j 光标下移一行 k 移动光标线 一.对整行操作 1.复制光标所在行 yy 2.删除光标所在行 dd 3.选中光标所在行 ...