无序列表 - Foundation教程

一、列表样式概述

Foundation 对无序列表（<ul>）提供了多种前缀符号样式控制类，允许你快速切换列表的视觉表现形式，无需额外编写 CSS。

二、圆圈前缀列表

Foundation 中无序列表默认前缀为实心圆。使用 .circle 类可显式指定为空心圆圈前缀：

<ul class="circle">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>Code language: HTML, XML (xml)

三、方块前缀列表

使用 .square 类将列表前缀符号修改为实心方块：

<ul class="square">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>Code language: HTML, XML (xml)

四、无前缀列表

使用 .no-bullet 类移除列表的所有前缀符号，适合用于导航菜单、卡片列表等不需要标识的场景：

<ul class="no-bullet">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>Code language: HTML, XML (xml)

五、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 列表样式示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>圆圈前缀列表（.circle）</h3>
        <ul class="circle">
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>

        <hr />

        <h3>方块前缀列表（.square）</h3>
        <ul class="square">
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>

        <hr />

        <h3>无前缀列表（.no-bullet）</h3>
        <ul class="no-bullet">
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

六、使用要点小结

类名	效果
默认（无类）	实心圆前缀
`.circle`	空心圆圈前缀
`.square`	实心方块前缀
`.no-bullet`	移除所有前缀符号

Previous: 折叠列表（Accordion）

Next: 选项卡导航（Tabs）