按钮组

您所在的位置:网站首页 excel怎么做展开的按钮框架 按钮组

按钮组

2024-07-13 10:43| 来源: 网络整理| 查看: 265

按钮组

将一系列按钮组合在一行上,或将其堆叠在垂直列中。

在本页面 基本示例

在.btn-group中用.btn包装一系列按钮。

Left Middle Right 确保 role正确并提供标签

为了使辅助技术(例如屏幕阅读器)传达一系列按钮已分组的信息,需要提供适当的role属性。对于按钮组,这将是role="group",而工具栏应该有role="toolbar"。

此外,应该给组和工具栏一个明确的标签,因为大多数辅助技术不会公布它们,尽管存在正确的role属性。在这里提供的示例中,我们使用aria-label,但也可以使用aria-labelledby等替代方法。

这些类也可以添加到链接组中,作为.nav导航组件的替代。

Active link Link Link Active link Link Link 混合风格 Left Middle Right 轮廓样式 Left Middle Right 复选框和单选按钮组

将类似按钮的复选框和单选切换按钮组合成一个外观无缝的按钮组。

Checkbox 1 Checkbox 2 Checkbox 3 Radio 1 Radio 2 Radio 3 按钮工具栏

为更复杂的组件将多组按钮组合到按钮工具栏中。根据需要使用实用程序类来分隔组、按钮等。

1 2 3 4 5 6 7 8

您可以随意将输入组与工具栏中的按钮组混合使用。与上面的示例类似,您可能需要一些实用程序来正确地分配空间。

@ @ 1 2 3 4 @ 1 2 3 4 @ 调整大小

不要将按钮大小调整类应用于组中的每个按钮,只需将.btn-group-*添加到每个.btn-group,包括嵌套多个组时的每个按钮。

... ... ... 嵌套

当您希望下拉菜单与一系列按钮混合时,请将一个.btn-group放在另一个.btn-group中。

Dropdown link Dropdown link 1 2 Dropdown Dropdown link Dropdown link 垂直变化

使一组按钮垂直堆叠而不是水平排列。此处不支持拆分按钮下拉列表。

Dropdown link Dropdown link Dropdown link Dropdown link Dropdown link Dropdown link Dropdown link Dropdown link ...



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3