企业官网建设流程全解析

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();）：

<divclass="row"><divclass="columns"><h3>基本按钮组</h3><ulclass="button-group"><li><ahref="#"class="button">按钮1</a></li><li><ahref="#"class="button">按钮2</a></li><li><ahref="#"class="button">按钮3</a></li></ul><h3>平均宽度 + 圆角 + 颜色</h3><ulclass="button-group even-4 round secondary"><li><ahref="#"class="button">一</a></li><li><ahref="#"class="button">二</a></li><li><ahref="#"class="button">三</a></li><li><ahref="#"class="button">四</a></li></ul><h3>响应式堆叠按钮组（小屏垂直）</h3><ulclass="button-group stack"><li><ahref="#"class="button success">保存</a></li><li><ahref="#"class="button alert">删除</a></li><li><ahref="#"class="button">取消</a></li></ul></div></div>

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

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

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

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

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