Foundation 按钮

Foundation 5 按钮（Buttons）

Foundation 5 的按钮样式非常丰富、响应式，支持多种颜色、大小、圆角、禁用状态，以及按钮组（Button Groups）和下拉按钮（Dropdown Buttons）。只需添加类名即可生效，无需额外 JS（下拉按钮除外）。

1. 基本按钮

• 任何<a>、<button>或<input type="submit">添加类.button即可变成 Foundation 按钮。
• 默认颜色：蓝色。

2. 常用类

• 颜色：.secondary（灰）、.success（绿）、.alert（红）、.warning（橙）。
• 大小：.tiny（极小）、.small（小）、默认、.large（大）、.expand（全宽）。
• 圆角：.radius（小圆角）、.round（大圆角）。
• 禁用：加disabled属性（或类.disabled）。

3. 代码示例

直接复制到你的 HTML 模板中测试：

<divclass="row"><divclass="columns"><h3>基本按钮与颜色</h3><aclass="button">默认按钮</a><aclass="button secondary">Secondary</a><aclass="button success">Success</a><aclass="button alert">Alert</a><aclass="button warning">Warning</a><h3>大小与圆角</h3><aclass="button tiny radius">Tiny Radius</a><aclass="button small round">Small Round</a><aclass="button large">Large</a><aclass="button expand">全宽 Expand</a><h3>禁用状态</h3><aclass="button disabled">Disabled（类）</a><buttonclass="button"disabled>Disabled（属性）</button></div></div>

4. 按钮组（Button Groups）

用于将多个按钮组合在一起。

<h3>按钮组</h3><ulclass="button-group"><li><aclass="button">按钮1</a></li><li><aclass="button">按钮2</a></li><li><aclass="button">按钮3</a></li></ul><ulclass="button-group round even-3"><!-- even-3 表示平均分成3份 --><li><aclass="button">左</a></li><li><aclass="button">中</a></li><li><aclass="button">右</a></li></ul>

5. 下拉按钮（Dropdown Buttons）

需要初始化 JS（已包含在$(document).foundation();中）。

<h3>下拉按钮</h3><aclass="button dropdown"data-dropdown="drop1">下拉按钮</a><ulid="drop1"class="f-dropdown"data-dropdown-content><li><ahref="#">选项1</a></li><li><ahref="#">选项2</a></li><li><ahref="#">选项3</a></li></ul>

这些按钮在移动端也会自动响应，保持良好触控体验。复制代码运行试试，点击下拉按钮查看效果！

下一个想学什么？表单（Forms）、导航（Top Bar）、网格进阶，还是其他组件？告诉我继续！