bootstrap分页与翻页

Posted 2020-07-19 LOVEwitch

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>