Foundation button group
May 04, 2021 Foundation5
Table of contents
Foundation button group
The button group
Foundation can create a series of buttons within the same line.
You
<ul>
element and adding a
.button-group
class:
Instance
< 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 >
Try it out . . .
.stack-for-small
is used for small screens, with buttons arranged horizontally to vertical:
Instance
< 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 >
Try it out . . .
The rounded button group
Use the
.radius
.round
to add fillet effects to buttons:
Instance
< 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 is the number of buttons in the button group, from 1 to 8:
Instance
< 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 >
Try it out . . .
下拉菜单按钮
下拉菜单按钮可以让用户选取设定好的值：
Instance
< 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 >
Try it out . . .
Instance resolution
.dropdown
class creates a drop-down menu button.
Open the
data-dropdown="
id
"
property.
The id value needs to match the contents of the drop-down menu (id01).
Add
<ul>
class and
.f-dropdown
property to create the contents of the
data-dropdown-content
menu in .
Finally, initialize Foundation JS.
Split button
We can also create a drop-down menu for split buttons.
Just add the
.split
class to the button and use the span element to generate a direction arrow button:
Instance
< 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 >
Try it out . . .
|
Tip: We'll learn more about drop-down menus later in the tutorial. |
|---|