<!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>
相关推荐
3. **组件**：Bootstrap 3包含多种可复用的组件，如导航条（navbar）、下拉菜单（dropdown）、模态框（modal）、轮播图（carousel）、按钮组（button group）和表单控件等，这些组件大大减少了自定义设计的工作量。...
而交易历史页面可能采用时间轴（timeline）或列表组（list group）组件，以清晰、有序的方式展示用户的交易记录。 值得注意的是，Tradix模板作为一个静态页面，意味着它并不包含服务器端的逻辑。因此，实际的交易...
Bootstrap是世界上最受欢迎的前端开发框架之一，用于快速构建响应式和...在探索压缩包中的Bootstrap-3-Tutorial-69---List-Group-Badges-master文件时，你可以找到示例代码和可能的注释，进一步加深对这个主题的理解。
`list-group` 是容器，`list-group-item` 代表列表项。这些指令允许我们通过 AngularJS 的双向数据绑定将模型数据与视图关联起来。 例如： ```html <div ng-app="yourApp" ng-controller="yourController"> <ul ...
为了实现Bootstrap风格，我们可以为这些元素添加相应的类，如`list-group`或`breadcrumb`。 接下来，我们将使用CSS3来实现箭头样式。CSS3的伪元素`::before`和`::after`可以帮助我们在不修改HTML结构的情况下添加...
Bootstrap-3.zip是一个包含使用Bootstrap 3框架编写的前端项目的压缩包。Bootstrap是一个流行的开源HTML、CSS和JavaScript框架，主要用于快速开发响应式和移动优先的网页应用。这个项目仿照了小米商城的界面，提供了...
引导列表过滤器 搜索小部件以过滤Bootstrap列表 与Bootstrap 3.3.7兼容！... itemChild：子项选择器（默认值：.list-group-item） itemFilter：用于过滤结果的函数（接收：文本，项目） 资源 用法
在 Bootstrap 中，你可以进一步自定义这些列表项，例如通过添加状态类（如 `active` 表示当前选中，`disabled` 表示禁用）或使用按钮样式的列表项（使用 `list-group-item-action` 和 `btn` 类）： ```html ...
在Bootstrap模板中，这些元素会被组织成清晰、易读的布局，可能使用卡片（card）组件或者简单的列表组（list group）来展示。每个评论可能是一个独立的行或卡片，包含必要的信息和操作按钮。 4. **CSS样式**：...
使用Bootstrap 4和Vue 2的基于list-group的简单预输入/自动完成 安装 从NPM： > npm i vue-bootstrap-typeahead --save 缩小的UMD和CommonJS版本位于“ dist”文件夹中。 该组件也可以直接在unpkg上的浏览器中使用...
<li class="list-group-item listItem">项目3 <!-- 更多项目... --> ``` 这个示例中，`#gridView`和`#listView`是按钮ID，`.listItem`是需要切换样式的列表项。当用户点击按钮时，相应的jQuery代码会执行，...
而`list-group-item`则是列表项的基础样式，添加`disabled`类后，列表项的背景色会变暗，文字颜色会变淡，以此来表示其禁用状态。 在JavaScript环境中，如果你想在用户交互时动态地禁用或启用列表项，可以利用...
列表项通常使用`.list-group-item`类来创建，并可以进一步添加`.active`或`.disabled`类来改变状态。 实现布局切换的关键在于使用jQuery来监听事件并动态修改元素的类。以下是一个基本的实现步骤： 1. **初始化...
3. **HTML结构**：HTML文件中可能使用了Bootstrap的类名，如`<ul class="list-group">`或`<div class="card">`等，来定义列表的样式和行为。 4. **手风琴效果**：列表项可以通过点击展开和收起，显示或隐藏详细内容...
这些元素可以使用Bootstrap的类来格式化，如卡片组件（card）和列表组（list-group）。 5. **CSS样式**：Bootstrap的Sass版本允许定制主题颜色、字体和其他样式，使得模板可以与网站的其他部分保持视觉一致性。2018...
3. 设计侧边栏：使用`.navbar`或`.list-group`等组件构建可折叠的侧边栏，设置各级菜单项。 4. 添加内容区：使用Bootstrap的栅格系统（Grid System）或其他容器类来组织和布局后台的主要功能区域。 5. 交互与动态...
<li class="list-group-item">项目3 ``` 列表组不仅可以包含纯文本，还可以包含链接、按钮以及带有徽标的列表项。此外，Bootstrap还提供了多种变体，比如带下划线的项、活动项、禁用项等，只需添加相应的类即可...
可以使用无序列表（`<ul>`）和列表项（`<li>`）配合Bootstrap的`list-group`和`active`类来创建： ```html <ul class="list-group step-indicator"> <li class="list-group-item active">步骤1 <li class="list-...