首页 > 程序开发 > web前端 > HTML/CSS >

面包屑导航与分页导航

2017-04-07

面包屑导航与分页导航。

面包屑导航与分页导航


面包屑 .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.运行效果

crumbs1.png


分页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.运行效果

crumbs2.png


翻页pager

1.翻页pager

<ul class="pager">

<li class="active"><a href="">上一页</a></li>

<li><a href="">下一页</a></li>

</ul>

2.运行效果

crumbs3.png


分页大小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.运行效果

crumbs4.png

相关文章
最新文章
热点推荐