Foundation 按钮组

Foundation 5 按钮组（Button Groups）

Foundation 5 的按钮组用于将多个按钮紧密组合在一起，形成统一的视觉效果。支持颜色统一、大小一致、圆角、平均分配宽度，以及堆叠（小屏自动垂直排列）等功能。非常适合工具栏、选项切换等场景。

1. 基本按钮组

使用 <ul class="button-group"> 包裹按钮，每个按钮放在 <li> 中。

2. 常用类

• .even-N：平均分配宽度（N 为按钮数量，如 .even-3 平均分成 3 份）。
• .radius / .round：添加圆角（整个组共享圆角）。
• .stack：小屏下自动垂直堆叠（响应式）。
• .stack-for-small：仅小屏堆叠（旧版常用）。
• 可组合颜色（如 .secondary）、大小（如 .tiny）。

3. 代码示例

复制到你的 HTML 模板中测试（记得初始化 $(document).foundation();）：

<div class="row">
    <div class="columns">
        <h3>基本按钮组</h3>
        <ul class="button-group">
            <li><a href="#" class="button">按钮1</a></li>
            <li><a href="#" class="button">按钮2</a></li>
            <li><a href="#" class="button">按钮3</a></li>
        </ul>

        <h3>平均宽度 + 圆角 + 颜色</h3>
        <ul class="button-group even-4 round secondary">
            <li><a href="#" class="button">一</a></li>
            <li><a href="#" class="button">二</a></li>
            <li><a href="#" class="button">三</a></li>
            <li><a href="#" class="button">四</a></li>
        </ul>

        <h3>响应式堆叠按钮组（小屏垂直）</h3>
        <ul class="button-group stack">
            <li><a href="#" class="button success">保存</a></li>
            <li><a href="#" class="button alert">删除</a></li>
            <li><a href="#" class="button">取消</a></li>
        </ul>
    </div>
</div>

4. 进阶：带下拉的按钮组

可以混合下拉按钮（需要 Dropdown 插件，已在 foundation() 初始化中）。

<ul class="button-group">
    <li><a href="#" class="button">普通按钮</a></li>
    <li>
        <a href="#" class="button dropdown" data-dropdown="drop">下拉按钮</a>
        <ul id="drop" class="f-dropdown" data-dropdown-content>
            <li><a href="#">选项1</a></li>
            <li><a href="#">选项2</a></li>
        </ul>
    </li>
</ul>

缩小浏览器窗口测试 .stack 类的响应式效果！按钮组样式统一、触控友好。

下一个想学什么？表单（Forms）、下拉菜单（Dropdowns）、导航栏（Top Bar），还是其他？告诉我继续教你！