Foundation button group


May 04, 2021 11:00 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

< 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 >

Try it out . . .

.stack-for-small is used for small screens, with buttons arranged horizontally to vertical:

Instance

< 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 >

Try it out . . .

The rounded button group

Use the .radius .round to add fillet effects to buttons:

Instance

< 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 is the number of buttons in the button group, from 1 to 8:

Instance

< 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 >

Try it out . . .

下拉菜单按钮

下拉菜单按钮可以让用户选取设定好的值:

Instance

<!-- 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 >

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

< 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 >

Try it out . . .
Foundation button group Tip: We'll learn more about drop-down menus later in the tutorial.