Pagers

當只需要上下頁兩種連結選項時,可以使用 Pagers。

<div class="pager">
    <a class="pager-prev">« 上一頁</a>
    <a class="pager-next">下一頁 »</a>
</div>

Pagers 只提供 .disabled 選項。

<div class="pager">
    <a class="pager-prev">« 上一頁</a>
    <a class="pager-next disabled">下一頁 »</a>
</div>

對齊

與 Paginations 相同,包含置中與靠右,只要在 .pagi 加上 .align-center 或是 .align-right 即可。

<div class="pager"></div>
<div class="pager align-center"></div>
<div class="pager align-right"></div>

Pagers 提供另一種左右對齊方式,可直接在 .pager 加上 .pager-justified

<div class="pager pager-justified"></div>

樣式

Pagers 另外提供 Bordered 樣式,可直接在 .pager 加上 .pager-bordered

<div class="pager pager-justified pager-bordered"></div>

Pagers 與 Cards

Pagers 可直接在 Cards 裡使用。

Lion Hat for Cats

This furry, handmade pet hat turns your cat or small dog into a lion, the king of animals!

<div class="card">
    <img class="card-img" src="img/demo1.jpg">
    <div class="card-box">
        <h4>Lion Hat for Cats</h4>
        <p>~略~</p>
    </div>
    <div class="pager pager-justified">
        <a class="pager-prev">« 上一頁</a>
        <a class="pager-next">下一頁 »</a>
    </div>
</div>