面包屑导航与分页导航
面包屑 .breadcrumb
1.新建一个web项目ch16，把ch15中的内容复制过来。将ch16中的demo01.html打开，删除上节课做的内容，留下头文件。
2.面包屑导航 .breadcrumb实例
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">高考专题</a></li>
</ul>
3.运行效果
分页pagination
1.分页pagination导航实例
<ul class=" pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
2.运行效果
翻页pager
1.翻页pager
<ul class="pager">
<li class="active"><a href="">上一页</a></li>
<li><a href="">下一页</a></li>
</ul>
2.运行效果
分页大小pagination-lg..
1.设置分页大小
<ul class=" pagination pagination-lg">
//大
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
<ul class=" pagination">
//中
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
<ul class=" pagination pagination-sm">
//小
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
2.运行效果
