建站
咨詢
售后
建站咨詢
新聞中心
Foundation 分頁
如果你的網(wǎng)頁有很多內(nèi)容，就需要使用分頁功能。
成都創(chuàng)新互聯(lián)公司主營榮縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,榮縣h5小程序開發(fā)搭建,榮縣網(wǎng)站營銷推廣歡迎榮縣等地區(qū)企業(yè)咨詢
要創(chuàng)建一個基礎(chǔ)的分頁功能需要在 .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
>
嘗試一下 ?
當(dāng)前頁面
可以在 加上 .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
>
嘗試一下 ?
禁用分頁
如果需要設(shè)置某個分頁不可點擊需要使用 .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
>
嘗試一下 ?
分頁方向
在第一個和最后一個 元素上添加.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
> 嘗試一下 ?
分頁居中顯示
我們可以在
- 外層添加
- 上添加
.current或.unavailable類設(shè)置當(dāng)前頁與不可點擊效果:實例
<
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
>
嘗試一下 ?
子導(dǎo)航
在頁面切換上，子導(dǎo)航是非常有用的。
在
.sub-nav類來創(chuàng)建子導(dǎo)航。在元素上添加標(biāo)題，為選中的選項添加.active類:實例
<
dl
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
>
<
/dl
>
嘗試一下 ?
當(dāng)前題目：創(chuàng)新互聯(lián)Foundation教程：Foundation分頁
文章位置：http://m.5511xx.com/article/coseddi.html
元素，并在 上添加.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
>
嘗試一下 ?
面包屑導(dǎo)航
面包屑導(dǎo)航用于展示當(dāng)前頁面的導(dǎo)航結(jié)構(gòu)。
在
.breadcrumbs 類來實現(xiàn)面包屑導(dǎo)航。你可以在
