免費(fèi)AI編程助手
Foundation 分頁
2022-08-05 15:13 更新
如果你的網(wǎng)頁有很多內(nèi)容，就需要使用分頁功能。
要創(chuàng)建一個基礎(chǔ)的分頁功能需要在 <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><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>
嘗試一下 ?
當(dāng)前頁面
可以在 <li> 加上 .current 類來標(biāo)注當(dāng)前頁面：
實例
<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>
<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>
嘗試一下 ?
禁用分頁
如果需要設(shè)置某個分頁不可點(diǎn)擊需要使用 .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>
<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 實體符號 ? 和 ? 來創(chuàng)建分頁方向符號：
實例
<ul class="pagination">
<li class="arrow"><a href= "#">«</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= "#">»</a></li>
</ul>
嘗試一下 ?
<li class="arrow"><a href= "#">«</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= "#">»</a></li>
</ul>
分頁居中顯示
我們可以在 <ul> 外層添加 <div> 元素，并在 <div> 上添加.pagination-centered 類來實現(xiàn)分頁居中顯示 :
實例
<div class="pagination-centered">
<ul class="pagination">
<li class="arrow"><a href="#">«</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="#">»</a></li >
</ul>
</div>
<ul class="pagination">
<li class="arrow"><a href="#">«</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="#">»</a></li >
</ul>
</div>
嘗試一下 ?
面包屑導(dǎo)航
面包屑導(dǎo)航用于展示當(dāng)前頁面的導(dǎo)航結(jié)構(gòu)。
在 <ul> 元素上添加 .breadcrumbs 類來實現(xiàn)面包屑導(dǎo)航。你可以在 <li> 上添加 .current 或 .unavailable 類設(shè)置當(dāng)前頁與不可點(diǎn)擊效果:
實例
<ul class="breadcrumbs">
<li><a href="#">Home </a></li>
<li><a href="#">Private </a></li>
<liclass="unavailable"><a href= "#">Pictures</a></li>
<li class="current">Vacation</li >
</ul>
<li><a href="#">Home </a></li>
<li><a href="#">Private </a></li>
<liclass="unavailable"><a href= "#">Pictures</a></li>
<li class="current">Vacation</li >
</ul>
嘗試一下 ?
子導(dǎo)航
在頁面切換上，子導(dǎo)航是非常有用的。
在 <dl> 元素上添加 .sub-nav 類來創(chuàng)建子導(dǎo)航。在<dt> 元素上添加標(biāo)題，為選中的選項 <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>
<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>
嘗試一下 ?
以上內(nèi)容是否對您有幫助：
更多建議：