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