Foundation 列表


在HTML 中，無序列表(<ul>) 實例如下:

##<ul> 
<li#>List item</li> 
<li#>List item</li > 
<li#>List item<# /li>
<li>List item<#/li#>
</ul>
#結果:

  • List item

  • List item

  • #List item

    • ##List item





######## ###########圓圈識別碼######在Foundation 中，無序列表(###<ul>###) 的前綴符號為圓圈，使用.circle  類，實例如下:#########實例######
<!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="circle">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

</body>
</html>
##########運行實例»#######點擊"運行實例" 按鈕查看線上實例### ######方塊識別碼######方塊識別碼前綴使用.square 類別:#########實例######
<!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="square">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

</body>
</html>
#########################################################運行實例»######點擊"運行實例" 按鈕查看在線實例#########無標識符######如果你不需要標識符，你可以使用 .no-bullet類別：#########實例######
<!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="no-bullet">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

</body>
</html>
#########運行實例»######點擊"運行實例"按鈕查看線上實例#### #####如果你需要新增一個水平的列表，可以在###<ul>### 上新增###.list-inline### 類別:########實例######
<!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="no-bullet">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

</body>
</html>
#########運行實例»######點擊"運行實例"按鈕查看線上實例######

清單選單

一些 Web 頁面可能需要清單選單。

在HTML 中，列表選單同無序列表<ul> 來定義，例如：

< #ul>
  <li><

## a href="#">Home<
/a></li>#  <li><a href="#">Menu 1<
/a> </li

>

 
    <

  • li

    • >

  • <

    • a

  • href=

    • "#"

  • >

    Menu 2
    • <
#/a
###>######<######/li######>#####  ###<######li######>######<######a### ###href=######"# "######>###Menu 3###<######/a######>######<######/li ######>#########<######/ul######>########…結果:#### ###########Home############Menu 1#############Menu 2########## ##Menu 3###############

如果你需要加入一個水平的選單，可以在<ul> 上加入.list-inline 類別:

實例

<!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="inline-list">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

#