bootstrap分頁與翻頁

bootstrap分頁在ul中添加pagination可顯示如下效果：

bootstrap翻頁在ul中添加pager類可顯示如下效果；

 

結合分頁與翻頁可顯示如下效果：

因此，需要3個塊元素xian顯示在同一列，解決辦法：

為第一個和最后一個ul設置float分別為left和right

代碼如下：

<div class="col-sm-offset-4 col-sm-3">
    <ul id="previous" class="pager">
        <li><a href="#">&larr;上一頁</a><>
    </ul>
    <ul id="pages" class="pagination">
        <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>
    </ul>
    <ul id="next" class="pager">
        <li><a href="#">下一頁&rarr;</a><li>
    </ul>
</div>            

css設置如下：

ul {
    display: inline-block;
}
#previous {
    float: left;
}
#next {
    float: right;
}
#pages {
    padding-left: 25px;
}

對於常見的塊級元素如下：

<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>