# Foundation 分頁 如果你的網頁有很多內容，就需要使用分頁功能。  要創建一個基礎的分頁功能需要在 `&lt;ul&gt;` 元素上加上 `.pagination` 類: ### 實例 ``` <ul 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> ``` ## 當前頁面 可以在 `&lt;li&gt;` 加上 `.current` 類來標注當前頁面： ### 實例 ``` <ul class="pagination"> ? <li class="current"><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> ``` ## 禁用分頁 如果需要設置某個分頁不可點擊需要使用 `.unavailable` 類： ### 實例 ``` <ul class="pagination"> ? <li><a href="#">1</a></li> ? <li><a href="#">2</a></li> ? <li class="unavailable"><a href="#">3</a></li> ? <li><a href="#">4</a></li> ? <li><a href="#">5</a></li> </ul> ``` ## 分頁方向 在第一個和最后一個 code&gt;&lt;li&gt; 元素上添加`.arrow` 類插入 HTML 實體符號 `&laquo;` 和 `&raquo;` 來創建分頁方向符號： ### 實例 ``` <ul class="pagination"> ? <li class="arrow"><a href="#">&laquo;</a></li> ? <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> ? <li class="arrow"><a href="#">&raquo;</a></li> </ul> ``` ## 分頁居中顯示 我們可以在 &lt;ul&gt; 外層添加 `&lt;div&gt;` 元素，并在 `&lt;div&gt;` 上添加`.pagination-centered` 類來實現分頁居中顯示 : ### 實例 ``` <div class="pagination-centered"> ? <ul class="pagination"> ??? <li class="arrow"><a href="#">&laquo;</a></li> ??? <li class="current"><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> ??? <li class="arrow"><a href="#">&raquo;</a></li> ? </ul> </div> ``` ## 面包屑導航 面包屑導航用于展示當前頁面的導航結構。 在 `&lt;ul&gt;` 元素上添加 `.breadcrumbs` 類來實現面包屑導航。你可以在 &lt;li&gt; 上添加 `.current` 或 `.unavailable` 類設置當前頁與不可點擊效果: ### 實例 ``` <ul class="breadcrumbs"> ? <li><a href="#">Home</a></li> ? <li><a href="#">Private</a></li> ? <li class="unavailable"><a href="#">Pictures</a></li> ? <li class="current">Vacation</li> </ul> ``` ## 子導航 在頁面切換上，子導航是非常有用的。 在 `&lt;dl&gt;` 元素上添加 `.sub-nav` 類來創建子導航。在 `&lt;dt&gt;` 元素上添加標題，為選中的選項 `&lt;dd&gt;` 添加 `.active` 類: ### 實例 ``` <ul class="sub-nav"> ? <dt>Filter:</dt> ? <dd class="active"><a href="#">All</a></dd> ? <dd><a href="#">Active</a></dd> ? <dd><a href="#">Pending</a></dd> ? <dd><a href="#">Suspended</a></dd> </ul> ```