码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap分页

时间:2015-08-19 01:55:09      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

       第一、基本的分页:

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

</ul>

 

第二、不可点击页面和当前页面的显示:

<ul class="pagination">

<li><a href="#">&laquo;</a></li>

<li class="disabled"><a href="#">1</a></li>

<li class="active"><a href="#">2</a><li>

<li><a href="#">3</a></li>

<li><a href="#">&raquo;</a></li>

</ul>

 

第三、分页样式从大到小的显示:

<ul class="pagination pagination-lg">

<li><a href="#">&laquo;</a></li>

<li class="disabled"><a href="#">1</a></li>

<li class="active"><a href="#">2</a><li>

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

</ul>

 

第四、基本的翻页:

<ul class="pager">

<li><a href="#">previous</a></li>

<li><a href="#">next</a></li>

</ul>

 

第五、基本分页的左右对齐和不可用的设置:

 <ul class="pager">

<li class="previous disabled"><a href="#">&larr; previous</a></li>

<li class="next"><a href="#">next &rarr;</a></li>

</ul>

 

效果图如下:

技术分享

 

Bootstrap分页

标签:

原文地址:http://www.cnblogs.com/professional-NET/p/4741108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!