# 分頁 輕松創建一個美觀的分頁導航來瀏覽網頁。 ## 用法 分頁組件由類似按鈕風格的鏈接并排排列組成。 | 類 | 概述 | | --- | --- | | `.uk-pagination` | 將這個類添加到一個 `&lt;ul&gt;` 元素，定義分頁導航組件。使用 `&lt;a&gt;` 元素作為分頁導航列表中的項目。 | | `.uk-active` | 將這個類添加到一個列表項，對其應用選中的狀態，使用 `&lt;span&gt;` 替代 `&lt;a&gt;` 元素。 | | `.uk-disabled` | 將這個類添加到一個列表項，對其應用禁用狀態，使用 `&lt;span&gt;` 替代 `&lt;a&gt;` 元素。 | 要應用一個無樣式的省略號，只需使用 `&lt;span&gt;` 來替代 `&lt;a&gt;` 元素。 ### 示例  ### Code. ``` <ul class="uk-pagination"> <li><a href="">...</a></li> <li class="uk-active"><span>...</span></li> <li class="uk-disabled"><span>...</span></li> <li><span>...</span></li> </ul> ``` * * * ## 對齊修飾類 向頁碼添加 `.uk-pagination-left` 或 `.uk-pagination-right` 類使其向左或者向右對齊。 #### 示例  ### Code. ``` <ul class="uk-pagination uk-pagination-left"> <li>...</li> </ul> ``` ``` <ul class="uk-pagination uk-pagination-right"> <li>...</li> </ul> ``` * * * ## 上一頁與下一頁 創建一個簡單上一頁和下一頁分頁導航是非常容易的。只需添加 `.uk-pagination-previous` 或 `.uk-pagination-next` 類到一個 `&lt;li&gt;` 元素，其向左或者向右對齊。 #### 示例  #### Code. ``` <li class="uk-pagination-previous"><a href="">...</a></li> <li class="uk-pagination-next"><a href="">...</a></li> ``` * * * ## 帶圖標的分頁導航 使用 [圖標組件](icon.html) 中的圖標增強分頁導航效果。添加一個 `.uk-icon-*` 類到分頁導航鏈接里的 `&lt;i&gt;` 或 `&lt;span&gt;` 元素中。 ### 示例  ### Code. ``` <li><a href=""><i class="uk-icon-angle-double-left"></i></a></li> <li><a href=""><i class="uk-icon-angle-double-right"></i></a></li> ``` * * * ## JavaScript 你可以應用附加組件中的[分頁組件](pagination-js.html)來自動計算頁碼，例如在由Ajax支持的列表視圖中觸發一個事件，動態地加載新的列表項。