?? ??? ???
/ Foundation 分頁
Foundation 分頁
如果你的網(wǎng)頁有很多內容，就需要使用分頁功能。
要創(chuàng)建一個基礎的分頁功能需要在 <ul> 元素上加上 .pagination 類:
實例
<!DOCTYPE html> <html> <head> <title>Foundation 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>分頁</h2> <p>.pagination 類提供了分頁鏈接：</p> <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> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
當前頁面
可以在 <li> 加上 .current 類來標注當前頁面：
實例
<!DOCTYPE html> <html> <head> <title>Foundation 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>分頁 - 當前頁</h2> <p>當前頁面需要添加 .current 類:</p> <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> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
禁用分頁
如果需要設置某個分頁不可點擊需要使用 .unavailable 類：
實例
<!DOCTYPE html> <html> <head> <title>Foundation 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>分頁 - 不可用狀態(tài)</h2> <p>如果要設置當前分頁不可用可以使用 .unavailable 類:</p> <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> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
分頁方向
在第一個和最后一個 code><li> 元素上添加.arrow 類插入 HTML 實體符號 « 和 » 來創(chuàng)建分頁方向符號：
實例
<!DOCTYPE html> <html> <head> <title>Foundation 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>分頁方向符號</h2> <p>使用 .arrow 類來創(chuàng)建方向符號：</p> <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> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
分頁居中顯示
我們可以在 <ul> 外層添加 <div> 元素，并在 <div> 上添加.pagination-centered 類來實現(xiàn)分頁居中顯示
:
實例
<!DOCTYPE html> <html> <head> <title>Foundation 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>分頁居中</h2> <p>分頁居中可以 在 ul 外層添加 div 并使用 pagination-centered 類 :</p> <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> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
面包屑導航
面包屑導航用于展示當前頁面的導航結構。
在 <ul> 元素上添加 .breadcrumbs 類來實現(xiàn)面包屑導航。你可以在 <li> 上添加 .current 或 .unavailable 類設置當前頁與不可點擊效果:
實例
<!DOCTYPE html> <html> <head> <title>Foundation 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>面包屑導航</h2> <p>.breadcrumb 類用于展示面包屑導航:</p> <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> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
子導航
在頁面切換上，子導航是非常有用的。
在 <dl> 元素上添加 .sub-nav 類來創(chuàng)建子導航。在<dt> 元素上添加標題，為選中的選項 <dd> 添加 .active 類:
實例
<!DOCTYPE html> <html> <head> <title>Foundation 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>子導航</h2> <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> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例