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

bootstrap分页与翻页

时间:2016-06-02 11:29:33      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

bootstrap分页在ul中添加pagination可显示如下效果:

技术分享

bootstrap翻页在ul中添加pager类可显示如下效果;

技术分享 

结合分页与翻页可显示如下效果:

技术分享

因此,需要3个块元素xian显示在同一列,解决办法:

为第一个和最后一个ul设置float分别为left和right

代码如下:

 1 <div class="col-sm-offset-4 col-sm-3">
 2     <ul id="previous" class="pager">
 3         <li><a href="#">&larr;上一页</a><>
 4     </ul>
 5     <ul id="pages" class="pagination">
 6         <li><a href="#">1</a><li>
 7         <li><a href="#">2</a><li>
 8     <li><a href="#">3</a><li>
 9     <li><a href="#">4</a><li>
10     <li><a href="#">5</a><li>
11     </ul>
12     <ul id="next" class="pager">
13         <li><a href="#">下一页&rarr;</a><li>
14     </ul>
15 </div>            

css设置如下:

 1 ul {
 2     display: inline-block;
 3 }
 4 #previous {
 5     float: left;
 6 }
 7 #next {
 8     float: right;
 9 }
10 #pages {
11     padding-left: 25px;
12 }

对于常见的块级元素如下:

<address> <blockquote> <dd> <div> <dl> <fieldset> <form> <hr> <noscript> <ol> <p> <pre> <table> <tfoot> <ul>

html5中新增的块级元素有:

<article> <aside> <audio> <canvas> <figcaption> <figure> <footer> <header> <hgroup> <output> <section> <vedio>

bootstrap分页与翻页

标签:

原文地址:http://www.cnblogs.com/witchgogogo/p/5552089.html

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