Foundation 按钮组
按钮组
Foundation 可以在同一行内创建一系列的按钮。
可以使用
<ul>
元素并添加
.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
类来创建。注意，按钮会跨越父元素的整个宽度:
实例
< 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
类用于小尺寸的屏幕，按钮有水平排列变为垂直排列：
实例
< 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
类为按钮添加圆角效果：
实例
< 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：
实例
< 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 >
尝试一下 »
下拉菜单按钮
下拉菜单按钮可以让用户选取设定好的值：
实例
< 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 元素生成一个方向箭的按钮：
实例
< 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 >
尝试一下 »
