<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
rel="stylesheet" media="screen">
<style>
body {
padding: 50px; /*边距*/
}
/*设置list列表的样式*/
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]-->
</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>
<ul class="list-group col-lg-4">
<li class="list-group-item">
<!-- badge标签 -->
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-lg btn-warning">Buy Now</button>
</a>
</li>
</ul>
<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-success">Buy Now</button>
</a>
</li>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<script src="../../bootstrap-3.0.0/js/alert.js"></script>
</body>
</html>
相关推荐
引导列表过滤器 搜索小部件以过滤Bootstrap列表 与Bootstrap 3.3.7兼容！... itemChild：子项选择器（默认值：.list-group-item） itemFilter：用于过滤结果的函数（接收：文本，项目） 资源 用法
Bootstrap 3 教程 69 - 列出组徽章 以下视频教程的代码
使用Bootstrap 4和Vue 2的基于list-group的简单预输入/自动完成 安装 从NPM： > npm i vue-bootstrap-typeahead --save 缩小的UMD和CommonJS版本位于“ dist”文件夹中。 该组件也可以直接在unpkg上的浏览器中使用...
Angular List Group - 基于和围绕组件的指令 演示 作为一个演示价值千言，请访问
$('.list-group').append('<li class="list-group-item"> Item ' i '</li>'); } $('.list-group').paginathing({ perPage: 5, limitPagination: 9, containerClass: 'panel-footer', pageNumbers:...
本文档适用于list-group+list-group-item组合形式，但不适合在item中再次放置col样式，该问题本人暂时未解决，有解决方法请及时告知本人。
整理自慕课笔记 列表组是Bootstrap框架新增的一个组件，可以...* list-group-item：列表项，常用的是li元素，当然也可以是div元素 来看一个简单的示例： <ul class=list-group> <li class=list-group-item>揭开C
本文实例为大家分享了bootstrap-paginator服务器端分页的基本用法，供大家参考，具体内容如下 ... [removed][removed] [removed][removed] [removed][removed] <... <li class=list-group-item><
$('.list-group').append('<li class="list-group-item"> Item ' i '</li>'); } $('.list-group').paginathing({ perPage: 5, limitPagination: 9, containerClass: 'panel-footer', pageNumbers: ...
列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件，列表组在bootstrap框架中也是一个独立的组件，所以也对应有自己独立源码： LESS：list-group.less SASS:_list-group.scss ...
使用Bootstrap 4和Vue 2的基于list-group的简单预输入/自动完成 这是一些实时示例，请 入门 文献资料 贡献 请注意，主动开发已在main分支上完成。 欢迎公关！ 这是开始的基本步骤。 以下是使项目在本地运行的步骤...
元素上添加 .list-group-item 类: 实例 First item Second item Third item 激活状态的列表项 通过添加 .active 类来设置激活状态的列表项： 实例 Active item Second item Third item 禁用的列表项 ....
Bootstrap list-group</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > <style> body{ margin-top:30px; font-...
添加 class .list-group-item。 下面的实例演示了这点： 实例 免费域名注册 免费 Window 空间托管 图像的数量 24*7 支持 每年更新成本 结果如下所示： 向列表组添加徽章 我们可以向任意的列表项添加徽章组件...
（2）向 <li> 添加 class .list-group-item。 看下面的例子： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
To drag elements from one list into another, both lists must have the same `group` value. You can also define whether lists can give away, give and keep a copy (`clone`), and receive elements. * ...
具体代码如下所示： <!...<... <head>...简易评论列表<...link rel=stylesheet href=node_modules\bootstrap\dist\css\bootstrap.css rel=external nofollow rel=external nofollow >... <ul class=list-group>
<a href="/ucenter/article/add" class="list-group-item active">发布文章</a> </nav> </@fly_userpower> ``` - IDEA打包  - 打包后的的文件目录结构，`resources`目录里只要`...
styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme styles/jqx.classic.css: Stylesheet for the Classic Theme styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme styles/jqx.energyblue....