- 开始时间：2020/1/13
- 结束时间：2020/1/14
（一）日常前戏
1、bootstrap官网：getbootstrap.com
官网给bootstrap的定义是：the world’s most popular front-end component library.
2、bootstrap中文网：bootcss.com，本课程只介绍bootstrap常用的那部分，剩余的部分相关文档可以在这个网站查询。
3、相关cdn网站：bootcdn.cn，解决下载源码缓慢的问题。
4、alpha版本不是稳定版。
（二）栅格系统
1、栅格系统专门用于分割页面。
2、栅格将母元素切割为12份。
3、
<div class="col-md-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
</div>
<div class="col-md-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
</div>
<div class="col-md-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
</div>
<div class="col-md-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
</div>
其中，col表示列，md与响应式布局有关，表示窗口大于中型尺寸时应用样式，3表示一个div占12列中的3列，以上4个div正好占满。
还可以设置窗口大于小型尺寸时应用样式：
<div class="col-sm-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
<div>
还可以设置窗口大于超小尺寸时应用样式：
<div class="col-xs-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
<div>
4、经过以上练习，对于一般的网页，可以立即用三个div将从左至右的布局写出来。比如博客系统，典型的布局就是两边窄，中间宽，那么可以从左至右切割为2、8、2三份。
<div class="col-sm-2">
<h3>主侧栏</h3>
</div>
<div class="col-sm-8">
<h1>内容</h1>
</div>
<div class="col-sm-2">
<h3>右侧栏</h3>
</div>
分割页面后，由于sm的存在，页面是响应式的，窗口小于small规定的相关参数后自动取消样式，这适用于PC与移动端同时使用。
5、栅格是有浮动的，在给母元素添加一些样式，比如背景颜色时，可能会因为浮动的存在而无法呈现应有的效果，这时应该为母元素添加类clearfix。
clearfix是bootstrap提供的专门用于清除浮动的类。
注意：
与之相对的，也有纵向分割的栅格类：row-sm-2等。
总结：
栅格主要实现以下两个功能：
- 分割页面
- 在分割的同时考虑响应式设计
（三）表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<form class="container container-small">
<h1>注册</h1>
<!-- 将姓与名放到一行中，若窗口小，仍为两行，体现响应式布局 -->
<div class="form-inline">
<div class="form-group has-error">
<!-- control-label使得div的状态应用到label上 -->
<label class="control-label">姓</label>
<input type="text" class="form-control input-lg">
</div>
<div class="form-group has-success">
<label class="control-label">名</label>
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="control-label">充值金额</label>
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group has-warning">
<label class="control-label">地址</label>
<select class="form-control">
<option value="1">金台区</option>
<option value="2">渭滨区</option>
<option value="3">陈仓区</option>
</select>
</div>
<!-- 将表单与栅格结合 -->
<!-- 以下就是密钥的经典样式 -->
<!-- 利用row将下面的表单与上面的对齐，因为row有负margin，在不希望栅格有两边的padding的情景下使用 -->
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="XXXX">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="XXXX">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="XXXX">
</div>
</div>
</form>
</body>
</html>
页面效果：
（四）按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="well">
<!-- 用p取代div是因为p有一个默认的margin，不会像默认div那么挤 -->
<p>
<button class="btn btn-default">戳我</button>
<button class="btn btn-primary">戳我</button>
<button class="btn btn-danger">戳我</button>
<button class="btn btn-warning">戳我</button>
<button class="btn btn-info">戳我</button>
</p>
<p>
<!-- a标签也可以表现为一个按钮 -->
<a class="btn btn-danger" href="http://www.baidu.com">断网测试</a>
<!-- input也可以表现为一个按钮 -->
<input class="btn btn-default" type="submit" value="戳我">
<!-- 以上的技巧使得网页给用户视角上的感觉更加统一 -->
</p>
<p>
<!-- 关于大小的调整 -->
<!-- large -->
<button class="btn btn-primary btn-lg">戳我</button>
<!-- default:btn-middle -->
<button class="btn btn-primary">戳我</button>
<!-- small -->
<button class="btn btn-primary btn-sm">戳我</button>
<!-- extra small -->
<button class="btn btn-primary btn-xs">戳我</button>
</p>
<p>
<!-- btn-block是一个块级元素，使得button占整个母元素的整宽 -->
<button class="btn btn-primary btn-block">戳我</button>
</p>
<p>
<button class="btn btn-default" disabled="disabled">戳不成</button>
<button class="btn btn-default active">戳中了</button>
<button class="btn btn-default">求戳</button>
</p>
</div>
</body>
</html>
页面效果：
（五）按钮组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="well">
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
</div>
<div class="btn-group">
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
</div>
</div>
<p>
<!-- 纵向排列 -->
<div class="btn-group-vertical">
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
<button class="btn btn-default">戳我</button>
</div>
</p>
</div>
</body>
</html>
页面效果如下：
（六）导航
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<!-- nav-justified使几个导航按钮平均分布 -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">忘记密码</a></li>
</ul>
<div>
<h1>登录</h1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi alias perspiciatis tempora debitis eum dignissimos. Nemo vel similique adipisci natus iure temporibus repellat? Beatae labore hic non voluptatum, ipsa placeat!
</div>
<br>
<br>
<ul class="nav nav-pills">
<li class="active"><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">忘记密码</a></li>
</ul>
<div>
<h1>登录</h1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi alias perspiciatis tempora debitis eum dignissimos. Nemo vel similique adipisci natus iure temporibus repellat? Beatae labore hic non voluptatum, ipsa placeat!
</div>
<br>
<br>
<!-- 添加row抵消col的padding，使得上下对齐 -->
<div class="row">
<!-- 纵向排列，可以用作侧栏。为限制不让其整宽，将其置于4/12的栅格中 -->
<div class="col-xs-4">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">忘记密码</a></li>
</ul>
</div>
<!-- 内容部分占8/12，与导航互补 -->
<div class="col-xs-8">
<h1>登录</h1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi alias perspiciatis tempora debitis eum dignissimos. Nemo vel similique adipisci natus iure temporibus repellat? Beatae labore hic non voluptatum, ipsa placeat!
</div>
</div>
</body>
</html>
main.css:
body{
max-width:400px;
/* 上下为0，左右auto，可以使其居中 */
margin:20px auto;
}
页面效果：
（七）导航栏
nav用于局部导航，nav-bar用于整站导航。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- 以下专门用来放logo -->
<a href="#" class="navbar-brand">拴蛋网</a>
</div>
<!-- 默认向左浮动 -->
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!-- navbar-left表示使其向左浮动 -->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">搜一下</button>
</form>
<!-- 使其向右浮动 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
<div class="container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta animi quisquam culpa dolore cupiditate, perferendis, magnam odit vero officiis quasi commodi autem ut similique ratione iusto amet, quod alias!<div>
</div>
</body>
</html>
页面效果：
（八）面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">用户统计</div>
<div class="small text-muted">记录每日用户访问数据</div>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit optio laboriosam delectus, facere aliquam numquam quia eum accusantium corrupti magnam est blanditiis nemo nihil expedita culpa accusamus adipisci molestias provident?
</div>
<div class="panel-footer">
<div class="small text-muted">
数据更新于5秒前
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">用户统计</div>
<div class="panel-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit optio laboriosam delectus, facere aliquam numquam quia eum accusantium corrupti magnam est blanditiis nemo nihil expedita culpa accusamus adipisci molestias provident?
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">用户统计</div>
<div class="panel-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit optio laboriosam delectus, facere aliquam numquam quia eum accusantium corrupti magnam est blanditiis nemo nihil expedita culpa accusamus adipisci molestias provident?
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">用户统计</div>
<div class="panel-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit optio laboriosam delectus, facere aliquam numquam quia eum accusantium corrupti magnam est blanditiis nemo nihil expedita culpa accusamus adipisci molestias provident?
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">用户统计</div>
<div class="panel-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit optio laboriosam delectus, facere aliquam numquam quia eum accusantium corrupti magnam est blanditiis nemo nihil expedita culpa accusamus adipisci molestias provident?
</div>
</div>
</body>
</html>
页面效果：
（九）表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>注册于</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>王花花</td>
<td>whh@yo.com</td>
<td>2018-10-04</td>
</tr>
<tr class="danger">
<td>逆麻羊</td>
<td>nmy@yo.com</td>
<td>2018-11-04</td>
</tr>
<tr class="warning">
<td>赵拴蛋</td>
<td>zsd@yo.com</td>
<td>2018-12-04</td>
</tr>
</tbody>
</table>
<!-- 区分奇数行与偶数行，使其明暗交错；striped：有条纹的 -->
<table class="table table-striped">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>注册于</th>
</tr>
</thead>
<tbody>
<tr>
<td>王花花</td>
<td>whh@yo.com</td>
<td>2018-10-04</td>
</tr>
<tr>
<td>逆麻羊</td>
<td>nmy@yo.com</td>
<td>2018-11-04</td>
</tr>
<tr>
<td>赵拴蛋</td>
<td>zsd@yo.com</td>
<td>2018-12-04</td>
</tr>
</tbody>
</table>
<!-- 类似于伪类选择器:hover；鼠标经过时有动画效果 -->
<table class="table table-hover">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>注册于</th>
</tr>
</thead>
<tbody>
<tr>
<td>王花花</td>
<td>whh@yo.com</td>
<td>2018-10-04</td>
</tr>
<tr>
<td>逆麻羊</td>
<td>nmy@yo.com</td>
<td>2018-11-04</td>
</tr>
<tr>
<td>赵拴蛋</td>
<td>zsd@yo.com</td>
<td>2018-12-04</td>
</tr>
</tbody>
</table>
<!-- 添加边框 -->
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>注册于</th>
</tr>
</thead>
<tbody>
<tr>
<td>王花花</td>
<td>whh@yo.com</td>
<td>2018-10-04</td>
</tr>
<tr>
<td>逆麻羊</td>
<td>nmy@yo.com</td>
<td>2018-11-04</td>
</tr>
<tr>
<td>赵拴蛋</td>
<td>zsd@yo.com</td>
<td>2018-12-04</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果：
（十）其它内容的集中讲解
- 页码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
</div>
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
</ul>
<!-- 另一种翻页方式，这种翻页方式默认居中 -->
<ul class="pager">
<li><a href="#">上一页</a></li>
<li class="disabled"><a href="#">下一页</a></li>
</ul>
</body>
</html>
页面效果：
2. 面包屑导航(breadcrumb)&徽章(badge)&投票表格(list-group)
breadcrumb:
这就是实习中遇到过的面！包！屑！（breadcrumb）
badge:
徽章一般用于标注某个实例的总量，比如阅读量、消息数目……
badge有一个好处：它可以针对bootstrap自己的元素动态调整其颜色，比如以下代码中“赞”与“投币”的部分。
list-group
主要的两个作用：投票&侧栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<div>
<div class="alert alert-danger">
当前访问的页面可能不安全...
</div>
</div>
<div class="breadcrumb">
<!-- 在具体应用中用具体路径取代# -->
<li><a href="#">首页</a></li>
<li><a href="#">文章列表</a></li>
<li class="active">Yo,world. <span class="badge">50k</span></li>
</div>
<h1>Yo,world.</h1>
<!-- 为文章添加一些标签 -->
<p>
<div class="label label-success">技术分享</div>
<div class="label label-info">计算机</div>
<div class="label label-warning">前端</div>
</p>
<div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laboriosam veritatis voluptas quasi nesciunt beatae voluptate dolore optio eveniet maxime atque, perspiciatis quibusdam voluptatem reiciendis ipsa ipsum distinctio? Modi, quos.</div>
<button class="btn btn-default">赞<span class="badge">10</span></button>
<button class="btn btn-primary">投币<span class="badge">10</span></button>
</div>
<br>
<div class="list-group">
<a href="" class="list-group-item">很好看</a>
<a href="" class="list-group-item">还不错</a>
<a href="" class="list-group-item">一般般</a>
<a href="" class="list-group-item">很差劲</a>
</div>
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
页面效果：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
