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 模板中测试：
<div class="row">
<div class="columns">
<h3>基本按钮与颜色</h3>
<a class="button">默认按钮</a>
<a class="button secondary">Secondary</a>
<a class="button success">Success</a>
<a class="button alert">Alert</a>
<a class="button warning">Warning</a>
<h3>大小与圆角</h3>
<a class="button tiny radius">Tiny Radius</a>
<a class="button small round">Small Round</a>
<a class="button large">Large</a>
<a class="button expand">全宽 Expand</a>
<h3>禁用状态</h3>
<a class="button disabled">Disabled（类）</a>
<button class="button" disabled>Disabled（属性）</button>
</div>
</div>4. 按钮组（Button Groups）
用于将多个按钮组合在一起。
<h3>按钮组</h3>
<ul class="button-group">
<li><a class="button">按钮1</a></li>
<li><a class="button">按钮2</a></li>
<li><a class="button">按钮3</a></li>
</ul>
<ul class="button-group round even-3"> <!-- even-3 表示平均分成3份 -->
<li><a class="button">左</a></li>
<li><a class="button">中</a></li>
<li><a class="button">右</a></li>
</ul>5. 下拉按钮（Dropdown Buttons）
需要初始化 JS（已包含在 $(document).foundation(); 中）。
<h3>下拉按钮</h3>
<a class="button dropdown" data-dropdown="drop1">下拉按钮</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
</ul>这些按钮在移动端也会自动响应，保持良好触控体验。复制代码运行试试，点击下拉按钮查看效果！
下一个想学什么？表单（Forms）、导航（Top Bar）、网格进阶，还是其他组件？告诉我继续！
