Ⅰbootstrap图标使用

使用注意

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

图标可访问性

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

为下拉菜单设置样式

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


image.png

对齐

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

添加下拉菜单标题

.dropdown-header


image.png

添加分割线

class="divider" role="separator"


image.png

禁用的菜单项

class="disabled"


image.png

按钮组设置注意

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


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 10,543评论 0 66
  • Bootstrap 是基于H5利用 JS和CSS 进行布局、提供插件、动画的一个框架。使用了JQuery进行DOM...
    轩居晨风阅读 4,549评论 0 5
  • 本篇文章学习一些bootstrap3的一些基本元素的简单样式,这些基本元素为按钮,文本,表格,表单和背景等,一样一...
    elkelk阅读 5,084评论 0 1
  • CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 5,320评论 0 1
  • 去年,我不记得是哪个日子了,匆忙且毫无目的的我最后总是手忙脚乱的。我想要更快更快,否则我就来不及在6点40分之前赶...
    清风不解語阅读 4,216评论 6 3

友情链接更多精彩内容