Senarai asas


Dalam HTML, contoh senarai tidak tertib (<ul>) adalah seperti berikut:

<ul>
🎜> <li>Item senaraikan</li> ;
>> <li>Item senarai</li
><></ul>Keputusan:
Senarai itemItem senaraiItem senarai
Item senarai

Pengecam bulatan

Dalam Foundation, simbol awalan senarai tidak tertib (
    ) ialah bulatan, menggunakan kelas .circle, contohnya seperti berikut:

  • Instance
  • <!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>

    • Run Instance»

  • Klik butang "Run Instance" untuk melihat contoh dalam talian

  • Pengecam kotak

    Awalan pengecam segi empat sama menggunakan kelas .square:
Instance

<!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>

<ul> Running instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tiada pengecam

Jika anda tidak memerlukan pengecam, anda boleh menggunakan kelas .no-bullet:

Instance

<!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>

Run Instance»

Klik butang "Run Instance" untuk lihat contoh dalam talian

Jika anda Untuk menambah senarai mendatar, anda boleh menambah kelas
pada
:

Instance

<!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>

Jalankan instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Menu Senarai

Sesetengah halaman web mungkin memerlukan menu senarai.

Dalam HTML, menu senarai ditakrifkan sama seperti senarai tidak tertib <ul>, contohnya:

<ul>
<li><a href="#">Rumah</a> </li>
<a href="#">Menu 1</a></li> <li>
<a href="#">Menu 2</a></li> <li>
<a href=" #">Menu 3</a>< /li></ul>
Keputusan:Rumah

Menu 1

  • Menu 2

  • Menu 3

    • Jika anda perlu menambah menu mendatar, anda boleh menambah kelas <ul> pada .list-inline:

    Instance

    <!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>

    Jalankan Instance»

    Klik butang "Run Instance" untuk melihat contoh dalam talian

←
→