亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

personnages

Foundation 分頁

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

要創(chuàng)建一個基礎的分頁功能需要在 <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; 來創(chuàng)建分頁方向符號：

實例

<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 類來實現(xiàn)分頁居中顯示 :

實例

<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 類來實現(xiàn)面包屑導航。你可以在 <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 類來創(chuàng)建子導航。在<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>
實例預覽 ?


關于我們 聯(lián)系我們 留言板

手冊網

Article précédent： Article suivant：