Latest web development tutorials

Foundation 分頁

如果你的網頁有很多內容，就需要使用分頁功能。

要創建一個基礎的分頁功能需要在<ul>元素上加上.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 >

嘗試一下»

當前頁面

可以在<li>加上.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><li>元素上添加.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 >
嘗試一下»

分頁居中顯示

我們可以在<ul>外層添加<div>元素，並在<div>上添加.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 >

嘗試一下»

麵包屑導航

麵包屑導航用於展示當前頁面的導航結構。

在<ul>元素上添加.breadcrumbs類來實現麵包屑導航。 你可以在<li>上添加.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 >

嘗試一下»

子導航

在頁面切換上，子導航是非常有用的。

在<dl>元素上添加.sub-nav類來創建子導航。 在<dt>元素上添加標題，為選中的選項<dd>添加.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 >

嘗試一下»