亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Foundation 中文手冊(cè) / Foundation 分頁

Foundation 分頁

如果你的網(wǎng)頁有很多內(nèi)容，就需要使用分頁功能。

要?jiǎng)?chuàng)建一個(gè)基礎(chǔ)的分頁功能需要在 <ul> 元素上加上 .pagination 類:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

當(dāng)前頁面

可以在 <li> 加上 .current 類來標(biāo)注當(dāng)前頁面：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>分頁 - 當(dāng)前頁</h2>
<p>當(dāng)前頁面需要添加 .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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

禁用分頁

如果需要設(shè)置某個(gè)分頁不可點(diǎn)擊需要使用 .unavailable 類：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>如果要設(shè)置當(dāng)前分頁不可用可以使用 .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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

分頁方向

在第一個(gè)和最后一個(gè) code><li> 元素上添加.arrow 類插入 HTML 實(shí)體符號(hào) &laquo; 和 &raquo; 來創(chuàng)建分頁方向符號(hào)：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>分頁方向符號(hào)</h2>
<p>使用 .arrow 類來創(chuàng)建方向符號(hào)：</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

分頁居中顯示

我們可以在 <ul> 外層添加 <div> 元素，并在 <div> 上添加.pagination-centered 類來實(shí)現(xiàn)分頁居中顯示 :

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

面包屑導(dǎo)航

面包屑導(dǎo)航用于展示當(dāng)前頁面的導(dǎo)航結(jié)構(gòu)。

在 <ul> 元素上添加 .breadcrumbs 類來實(shí)現(xiàn)面包屑導(dǎo)航。你可以在 <li> 上添加 .current 或 .unavailable 類設(shè)置當(dāng)前頁與不可點(diǎn)擊效果:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>面包屑導(dǎo)航</h2>
<p>.breadcrumb 類用于展示面包屑導(dǎo)航:</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

子導(dǎo)航

在頁面切換上，子導(dǎo)航是非常有用的。

在 <dl> 元素上添加 .sub-nav 類來創(chuàng)建子導(dǎo)航。在<dt> 元素上添加標(biāo)題，為選中的選項(xiàng) <dd> 添加 .active 類:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>子導(dǎo)航</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例