Foundation 按钮组与下拉菜单按钮 - Foundation教程

一、水平按钮组

Foundation 可以在同一行内创建一系列的按钮。使用 <ul> 元素并添加 .button-group 类来创建按钮组：

<ul class="button-group">
    <li><button type="button" class="button">新增</button></li>
    <li><button type="button" class="button">修改</button></li>
    <li><button type="button" class="button">删除</button></li>
</ul>Code language: HTML, XML (xml)

二、垂直按钮组

使用 .stack 类创建垂直排列的按钮组。注意，按钮会跨越父元素的整个宽度：

<ul class="button-group stack">
    <li><button type="button" class="button">新增</button></li>
    <li><button type="button" class="button">修改</button></li>
    <li><button type="button" class="button">删除</button></li>
</ul>Code language: HTML, XML (xml)

三、响应式垂直按钮组

.stack-for-small 类用于小尺寸屏幕下，按钮由水平排列变为垂直排列：

<ul class="button-group stack-for-small">
    <li><button type="button" class="button">新增</button></li>
    <li><button type="button" class="button">修改</button></li>
    <li><button type="button" class="button">删除</button></li>
</ul>Code language: HTML, XML (xml)

四、按钮组圆角效果

在按钮组中使用 .radius 和 .round 类为按钮添加圆角效果：

<ul class="button-group radius">
    <li><button type="button" class="button">Apple</button></li>
    <li><button type="button" class="button">Samsung</button></li>
    <li><button type="button" class="button">Sony</button></li>
</ul>

<ul class="button-group round">
    <li><button type="button" class="button">Apple</button></li>
    <li><button type="button" class="button">Samsung</button></li>
    <li><button type="button" class="button">Sony</button></li>
</ul>Code language: HTML, XML (xml)

五、均匀延展按钮组

.even-num 类用于在按钮组中均匀分配按钮的宽度，并跨越父元素 100% 宽度。num 为按钮组中按钮的数量，支持从 1 到 8：

<ul class="button-group even-8">
    <li><button type="button" class="button">A</button></li>
    <li><button type="button" class="button">B</button></li>
    <li><button type="button" class="button">C</button></li>
    <li><button type="button" class="button">D</button></li>
    <li><button type="button" class="button">E</button></li>
    <li><button type="button" class="button">F</button></li>
    <li><button type="button" class="button">G</button></li>
    <li><button type="button" class="button">H</button></li>
</ul>Code language: HTML, XML (xml)

六、下拉菜单按钮

下拉菜单按钮可以让用户选取设定好的值。通过 data-dropdown 属性关联下拉内容区域：

<!-- Trigger the dropdown -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>

<!-- The actual dropdown -->
<ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></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>水平按钮组</h3>
        <ul class="button-group">
            <li><button type="button" class="button">新增</button></li>
            <li><button type="button" class="button">修改</button></li>
            <li><button type="button" class="button">删除</button></li>
        </ul>

        <h3>垂直按钮组</h3>
        <ul class="button-group stack">
            <li><button type="button" class="button">新增</button></li>
            <li><button type="button" class="button">修改</button></li>
            <li><button type="button" class="button">删除</button></li>
        </ul>

        <h3>圆角按钮组</h3>
        <ul class="button-group radius">
            <li><button type="button" class="button">Apple</button></li>
            <li><button type="button" class="button">Samsung</button></li>
            <li><button type="button" class="button">Sony</button></li>
        </ul>

        <ul class="button-group round">
            <li><button type="button" class="button">Apple</button></li>
            <li><button type="button" class="button">Samsung</button></li>
            <li><button type="button" class="button">Sony</button></li>
        </ul>

        <h3>均匀延展按钮组（8等分）</h3>
        <ul class="button-group even-8">
            <li><button type="button" class="button">A</button></li>
            <li><button type="button" class="button">B</button></li>
            <li><button type="button" class="button">C</button></li>
            <li><button type="button" class="button">D</button></li>
            <li><button type="button" class="button">E</button></li>
            <li><button type="button" class="button">F</button></li>
            <li><button type="button" class="button">G</button></li>
            <li><button type="button" class="button">H</button></li>
        </ul>

        <h3>下拉菜单按钮</h3>
        <a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
        <ul id="id01" data-dropdown-content class="f-dropdown">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

    </div>
</div>

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

Previous: Foundation 按钮（Button）

Next: Foundation 字体图标与工具栏