面包屑导航与分页导航

面包屑导航与分页导航

---

面包屑 .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="#">&laquo;</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="#">&raquo;</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="#">&laquo;</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="#">&raquo;</a></li>

 </ul>

 <ul class=" pagination">

//中

<li><a href="#">&laquo;</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="#">&raquo;</a></li>

 </ul>

 <ul class=" pagination pagination-sm">

//小

<li><a href="#">&laquo;</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="#">&raquo;</a></li>

 </ul>

2.运行效果