財団リスト
HTML の順序なしリスト (<ul>) の例は次のとおりです:
<ul>
<li>List item< /li >
<li>リストアイテム</li><
li> リストアイテム< / り> <
li>リストアイテム</li><
/ul>結果:
<li>List item< /li >
<li>リストアイテム</li><
li> リストアイテム< / り> <
li>リストアイテム</li><
/ul>結果:
- リストアイテム
- リストアイテム
- リストアイテム
- リストアイテム
Foundationでは、順序なしリスト(
)の接頭辞シンボルは、.circleクラスを使用して円です。インスタンス 次のように:<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>
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します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="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>🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜識別子なし🎜🎜識別子が必要ない場合は、.no-bulletクラスを使用できます: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜 🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜水平リストを追加する必要がある場合は、
.list-を追加できます。 🎜 の inline クラス: 🎜🎜🎜インスタンス🎜 🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜 [インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します🎜🎜リスト メニュー
一部の Web ページではリスト メニューが必要な場合があります。
HTML では、リスト メニューは順序なしリスト<ul>と同じように定義されます。例:
<ul>
<li>< a href="#">ホーム</a></li>
< リ> ; <a href="#">メニュー1</a></li>
< リ> < gt; <li><a href="#">メニュー3</a
> < /li></ul>結果:ホームメニュー1 u 2
メニュー3
<li>< a href="#">ホーム</a></li>
< リ> ; <a href="#">メニュー1</a></li>
< リ> < gt; <li><a href="#">メニュー3</a
> < /li></ul>結果:ホームメニュー1 u 2
メニュー3
水平メニューを追加する必要がある場合は、<ul> 上添加 .list-inlineクラス:
