Foundation 按鈕組
Foundation 按鈕組
按鈕組
Foundation 可以在同一行內創建一系列的按鈕。
可以使用<ul>元素並添加.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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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)匹配。
在<ul>中添加.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 >
< 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 >
嘗試一下»
 | 提示:後面的教程中我們將學到更多關於下拉菜單是知識。 |
|---|