# Foundation 按钮组 ## 按钮组 Foundation 可以在同一行内创建一系列的按钮。 可以使用 `&lt;ul&gt;` 元素并添加 `.button-group` 类来创建按钮组： ### 实例 ``` <ul class="button-group">   <li><button type="button" class="button">Apple</button></li>   <li><button type="button" class="button">Samsung</button></li>   <li><button type="button" class="button">Sony</button></li> </ul> ``` ## 垂直按钮组 垂直按钮组使用 `.stack` 类来创建。注意，按钮会跨越父元素的整个宽度: ### 实例 ``` <ul class="button-group stack">   <li><button type="button" class="button">Apple</button></li>   <li><button type="button" class="button">Samsung</button></li>   <li><button type="button" class="button">Sony</button></li> </ul> ``` `.stack-for-small` 类用于小尺寸的屏幕，按钮有水平排列变为垂直排列： ### 实例 ``` <ul class="button-group stack-for-small">   <li><button type="button" class="button">Apple</button></li>   <li><button type="button" class="button">Samsung</button></li>   <li><button type="button" class="button">Sony</button></li> </ul> ``` ## 圆角按钮组 按钮组中使用 `.radius` 和 `.round` 类为按钮添加圆角效果： ### 实例 ``` <ul class="button-group radius">   <li><button type="button" class="button">Apple</button></li>   <li><button type="button" class="button">Samsung</button></li>   <li><button type="button" class="button">Sony</button></li> </ul> <ul class="button-group round">   <li><button type="button" class="button">Apple</button></li>   <li><button type="button" class="button">Samsung</button></li>   <li><button type="button" class="button">Sony</button></li> </ul> ``` ## 均匀延展按钮组 `.even-num` 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。 _num_ 为按钮组中按钮的数量，从 1 到 8： ### 实例 ``` <ul class="button-group even-3">   <li><button type="button" class="button">Apple</button></li>   <li><button type="button" class="button">Samsung</button></li>   <li><button type="button" class="button">Sony</button></li> </ul> <ul class="button-group even-5">   <li><button type="button" class="button">Apple</button></li>   <li><button type="button" class="button">Samsung</button></li>   <li><button type="button" class="button">Sony</button></li>   <li><button type="button" class="button">HTC</button></li>   <li><button type="button" class="button">Huawei</button></li> </ul> <ul class="button-group even-8">   <li><button type="button" class="button">A</button></li>   <li><button type="button" class="button">B</button></li>   <li><button type="button" class="button">C</button></li>   <li><button type="button" class="button">D</button></li>   <li><button type="button" class="button">E</button></li>   <li><button type="button" class="button">F</button></li>   <li><button type="button" class="button">G</button></li>   <li><button type="button" class="button">H</button></li> </ul> ``` ## 下拉菜单按钮 下拉菜单按钮可以让用户选取设定好的值： ### 实例 ``` <!-- Trigger the dropdown --> <a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a> <!-- The actual dropdown --> <ul id="id01" data-dropdown-content class="f-dropdown">   <li><a href="#">Link 1</a></li>   <li><a href="#">Link 2</a></li>   <li><a href="#">Link 3</a></li> </ul> <!-- Initialize Foundation JS --> <script> $(document).ready(function() {     $(document).foundation(); }) </script> ``` ### 实例解析 `.dropdown` 类创建一个下拉菜单按钮。 使用带有 `data-dropdown="_id_"` 属性的按钮或链接打开下拉菜单。 _id_ 值需要与下拉菜单的内容 (id01) 匹配。 在 `&lt;ul&gt;` 中添加 `.f-dropdown` 类和 `data-dropdown-content` 属性来创建下拉菜单的内容。 最后初始化 Foundation JS。 ## 分割按钮 我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 `.split` 类并使用 span 元素生成一个方向箭的按钮： ### 实例 ``` <button class="button split">Split Button   <span data-dropdown="id01"></span> </button> <ul id="id01" data-dropdown-content class="f-dropdown">   <li><a href="#">Link 1</a></li>   <li><a href="#">Link 2</a></li>   <li><a href="#">Link 3</a></li> </ul> <!-- Initialize Foundation JS --> <script> $(document).ready(function() {     $(document).foundation(); }) </script> ``` >  > **提示:**后面的教程中我们将学到更多关于下拉菜单是知识。