首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【译】W3C WAI-ARIA最佳实践 -- 布局

组合部件的布局栅格 grid 模式可被用于组合一组可交互元素,例如链接、按钮复选框。由于整个网格只有一个元素包含在tab序列,所以使用网格进行分组可以显著减少页面上的tab步骤。...这些小部件的示例包括链接,按钮,菜单栏,切换按钮单选按钮(不是单选按钮组),开关复选框。 一个单元格包含文本或一个单独的图形,网格导航键在单元格上设置焦点。...在交互模式中使用光标键交互的组件,例如单选按钮或滑块。 以下为禁用恢复网格导航功能的惯用键盘操作。...aria-colcount 或 aria-rowcount 分别设置为或行的总数。 aria-colindex 或 aria-rowindex 设置为单元格在行的位置。...优化工具栏小部件的优点: 实现焦点管理,这样在Tab顺序只包含一个toolbar站点,使用光标键可以在toolbar的控件间移动焦点。 避免在工具栏包含需要光标键操作的控件,例如文本框或单选按钮

6.1K50
您找到你想要的搜索结果了吗?
是的
没有找到

BootStrap应用开发学习入门

( ) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动偏移,应用于 元素 元素,具体实现可以查看实例...您也可以通过使用 class .list-inline 把所有的列表项放在同一行。 定义列表:在这种类型的列表,每个列表项可以包含 dt dd 元素。 dt 代表 定义术语,就像字典。...该内边距是通过 .rows 上的外边距(margin)取负,表示第一最后一的行偏移。 网格系统是通过指定您想要横跨的十二个可用的来创建的。...; 比如:row 分为 3 9 ,我们可以在9中进行分 4 个 col-md-6 则,相对于在 9再次等分为2行12;(具体查看下面的案例) 排序 描述:以一种顺序编写,然后以另一种顺序显示...#按钮状态 .active #按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)按钮元素 / 锚元素 .disable #禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

17.4K20

BootStrap应用开发学习入门

Source: 最新的 Bootstrap LESS JavaScript 源代码. CDN外联Link ) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动偏移,应用于 元素 元素,具体实现可以查看实例...您也可以通过使用 class .list-inline 把所有的列表项放在同一行。 定义列表:在这种类型的列表,每个列表项可以包含 dt dd 元素。 dt 代表 定义术语,就像字典。...; 比如:row 分为 3 9 ,我们可以在9中进行分 4 个 col-md-6 则,相对于在 9再次等分为2行12;(具体查看下面的案例) 排序 描述:以一种顺序编写,然后以另一种顺序显示...#按钮状态 .active #按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)按钮元素 / 锚元素 .disable #禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

14.5K30

CSS实现最简洁的单选折叠菜单

今天教大家用纯css实现一个单选的折叠菜单,不需要JavaScript就能用。折叠菜单标签页差不多,逻辑上都是一种单选面板,只不过折叠菜单一般是垂直堆叠的,标签页是横着排列。...标签页: 既然是单选的,就可以用单选按钮来实现。...首先这些单选按钮组的父元素用,因为可以监听按钮组的变化,同时还能通过name属性直接得到RadioNodeList列表变化值,非常方便,不用设置其他的css选择器了。...但是默认是这样的: 还是先用appearance: none禁用如上图的默认样式,然后利用::before作为按钮左侧的名称(读取value属性),::after作为右侧的小箭头(字符>...v),通过:checked属性表示折叠状态。

5K20

【BootStrap】栅格系统、表单样式与按钮样式-附有源码

Bootstrap的栅格系统,由一个行(.row)多个构成。 栅格系统用于通过一系列的行(row)与(column)的组合来创建页面布局,你的内容就可以放入这些创建好的网页布局。...##嵌套 嵌套:就是在某个栏,再嵌套一个完整的栅格系统。....col-md-pull-n 向左移n! 注意!!!这个是绝对定位,也就是其他不动!这个其他重叠!....checkbox复选框样式 .radio单选框样式 .disabled可以禁用单选框或复选项的文本。...、.disabled按钮禁用状态 按钮尺寸:.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮) .btn-block:将按钮拉伸到撑满整个父元素。

1.3K10

HTML初学

行为标准:主要包括对象模型 如DOM(文档对象模型)、JavaScript(标准脚本语言)等,负责描述页面的动态效果。...input系列 属性 说明 text 文本框 radio 单选框 checkbox 复选框 file 上传文件 submit 提交按钮 reset 重置按钮 button 普通按钮 password 密码框...form标签: 表单域包括 输入框、下拉列表、文本框 输入框(input)类型: 1. text 文本框 2. password 密码框 3. radio 单选单选按钮有互斥效果,name...-- 单选按钮有互斥效果,name属性必须相同。...3.name 属性用于对提交到服务器后的表单数据进行标识 4. value 为input元素设定值(默认值) 输入框的值 选项的值 按钮上的文字 5.checked 在页面加载时应该被预先选定的单选复选选项

3.2K40

表单常用的控件有哪些_html表单控件样式修改

disbled属性 规定输入字段是禁用的,被禁用的元素是不可以用不可以点击的,被禁用的元素不会被提交。...如果需要提醒用户,则必须编写javascript代码 提醒:输入限制并非万无一失。javascript提供了很多方法来增加非法输入。如必须同时对限制进行检查。...(一般用于通过javascript启动脚本) checkbox 定义复选框 file 定义输入字段“浏览”按钮,供文件上传。...image 定义图像形式的提交按钮。 password 定义密码字段,该字段的字符被掩码 radio 定义单选按钮 reset 定义重置按钮。...重置按钮会清除表单的所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。

3.9K20

HTML学习

JavaScript是用来实现网页上的特效效果。...被包围在 pre 元素的文本通常会保留空格换行符。 标签 使用标签可实现超链接,它在网页制作可以说是无处不在,只要有链接的地方,就会有这个标签。...,以备后台程序ASP、PHP使用(同一组的单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的作用) 4、checked:当设置checked=”checked”时,该选项被默认选中...multiple=”multiple”可以实现多选 提交按钮 语法: type:只有当type值设置为submit时,按钮才有提交作用...value:按钮上显示的文字 重置按钮 语法: type:只有当type值设置为reset时,按钮才有提交作用 value:按钮上显示的文字

2.2K30

后台系统设计(上篇:选择)

·在用户与单选按钮交互时,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中和禁用)。...·在用户与复选框交互时,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中、禁用未全选状态)。 讨论:仅有两个互斥的选项(二元)是选择单选按钮还是复选框?...复选框单选按钮之间的主要差别是: 单选按钮给人更加直接的示意,例如开启关闭,而复选只表达一面信息,因此它的反面信息并不是非常直观,甚至对于某些用户而言,并不清楚勾选不勾选所表达的含义。...三、Icon button 图标按钮 图标按钮可以说是结合了单选按钮、复选框及命令控件的变形形式,性质上存在互斥(单选非互斥(多选)。...·禁用菜单项,而不是隐藏,以提高功能的可发现性。 ·下拉菜单文本保持简洁扼要,文本内容限制为单行。 ·请根据具体情况,定义列表项的最小最大宽度,以适应其内容。

9.6K21

JavaWeb01轻松掌握HTML(Java真正的全栈开发)

value:定义标签值(默认值) size:定义输入字段的长度(密码框的宽度) maxlength:定义可输入最大的字符个数 radio:定义单选按钮(单选框或者单选按钮...-- input 标签 type=”radio“ 时 为单选框或者单选按钮 name:规定单选框的名称,通过name进行数据传递,分组。 value:实际上提交的数据。 checked: 默认选择。...最常用的有titlemeta它的内容不会被显示 只有的内容才会被显示 title标签 只能出现于....这个就代表水平线长度为总长度的30%. 3.块标签: div标签 用于在文档设定一个块区域. span标签 用于在行内设定一个块区域....-- input 标签 type=”radio“ 时 为单选框或者单选按钮 name:规定单选框的名称,通过name进行数据传递,分组。 value:实际上提交的数据。 checked: 默认选择。

5.1K50

前端(一)-Html

type="password" name:密码框名称(必填) size:密码框长度 --> 10.3.3 单选按钮...同一组单选按钮,name属性值必须相同,才能在选中单选按钮时达到互斥; <!...-- type="radio" name:单选框名称(必填),一组的名称需要相同 checked:单选按钮选中状态 value:单选框的值 --> <input name="gen" type="radio...-- 讲解只读<em>和</em><em>禁用</em>的语法,强调不能单写readonly或disabled,必须写readonly =”readonly”<em>和</em>disabled=“disabled”,介绍只读<em>和</em><em>禁用</em>的使用场合 --> <input...,通常是一些引导<em>和</em>导航信息 nav 可以作为页面导航的连接组 section 页面<em>中</em>的一个内容区块,通常由内容及其标题组成 article 代表一个独立的,完整的相关内容块,可独立于页面其他内容使用 aside

4.3K20
领券