# 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> ``` >  > **提示:**后面的教程中我們將學到更多關于下拉菜單是知識。