Foundation 分頁
如果你的網頁有很多內容，就需要使用分頁功能。
要建立一個基礎的分頁功能需要在<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>分页 - 不可用状态</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 實體符號« 和» 來建立分頁方向符號：實例
<!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 类来创建方向符号：</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 類別來實現分頁居中顯示
:實例
<!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 類別來實作麵包屑導覽。你可以在<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 類別來建立子導覽。在<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>
運行實例»
點擊"運行實例"按鈕查看線上實例
