Ⅰbootstrap图标使用

使用注意

图标类应用于span标签上
只对内容为空的元素起作用

图标可访问性

为这些图标设置了 aria-hidden="true" 属性,避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容。

为下拉菜单设置样式

将下拉菜单触发器和下拉菜单都包裹在 .dropdown/.dropup 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。


Ⅰbootstrap图标使用_第1张图片
image.png

对齐

使用.dropdown-menu-right类让菜单右对齐

添加下拉菜单标题

.dropdown-header


Ⅰbootstrap图标使用_第2张图片
image.png

添加分割线

class="divider" role="separator"


Ⅰbootstrap图标使用_第3张图片
image.png

禁用的菜单项

class="disabled"


Ⅰbootstrap图标使用_第4张图片
image.png

按钮组设置注意

确保设置正确的role属性 来帮助像屏幕阅读器等辅助设备正确传达按钮分组
对于按钮组合 role="group" 对于工具栏toolbar应该是 role="toolbar"


Ⅰbootstrap图标使用_第5张图片
image.png

你可能感兴趣的:(Ⅰbootstrap图标使用)