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）、网格进阶，还是其他组件？告诉我继续！
