sr-only是什么意思

最新推荐文章于 2024-04-23 10:32:35 发布
最新推荐文章于 2024-04-23 10:32:35 发布
阅读量1.2w 收藏 6
点赞数 3
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Albaficahan/article/details/50673261
版权

.sr-only是 除了屏幕阅读器外，其他设备上隐藏该元素，这个是用于帮助残障人士阅读的。

以下代码是一个导航条中的按钮的一个段落，其中的<span class=“sr-only”></span>就是保证屏幕阅读器正确读取且不会影响Ui的视觉呈现。

样式请调用bootstrap的css。

<span class="icon-bar"></span>就是按钮中添加的横线。（这是bootstrap里的样式，需要在有网的情况下运行，无网则无此样式）

navbar-inverse的意思是改变导航条的颜色

navbar-brand导航条的题目                          #代表占位符

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css王/王.css">
    <link rel="stylesheet" href="css王/animate.css">
    <link rel="stylesheet" href="css王/animate.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#"class="navbar-brand">白银之王</a>
        </div>
    </div>

以上图是有网情况下

以下是无网情况下



Albaficahan
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 3中的sr-only是什么？
w36680130的博客
04-12 923
What is the class sr-only used for? sr-only用于什么类？ Is it important or can I remove it? 是重要的还是我可以删除它？
WinHex_14.2_SR-3_SC
04-27
The Disk Editor, that is part of the Tools menu, allows you to access floppy and hard disks ... Some of the aforementioned partitioning types are supported with specialist and forensic licenses only.
sr-only
qq_45178972的博客
11-07 172
让屏幕阅读软件认得出，然后读给视力障碍人士
SRC知识分享【干货满满】
最新发布
小司机的奥拓
04-23 2349
SRC（SecurityResponseCenter）安全应急响应中心，是企业用于对外接收来自用户/白帽发现并报告相关安全产品安全缺陷的站点，换句话说就是连接白帽子和企业的平台。同时也可以看成一个”资源置换平台“，白帽用自己的技术合法的向企业提交漏洞，企业给予相应的赏金。相对于企业组织内部技术人员进行渗透测试，SRC更像是发起一场“人民的战争”。目前国内有两种漏洞平台，一种是缺陷报告平台，另一种就是xSRC平台。缺陷报告平台：又称漏洞报告平台，是指由独立的第三方公司或机构成立综合性的“安全应急响应中心”。国
bootstrap里的sr-only是什么属性？sr-only表示什么意思？有什么用途？
热门推荐
哈里·雪利博客
12-19 1万+
bootstrap里的sr-only全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。 有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士， 比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器
bootstrap里的sr-only表示什么意思？ class=“sr-only“
I18545361622的博客
11-23 1236
此样式不能在前端页面呈现效果，只是用来进行文本说明的。
usda-sr-parser:基于适度灵活且可配置的基于Node.js的解析器，用于USDA营养信息标准参考
05-17
无论选择什么选项，都会创建一个sqlite3数据库。 创建数据库后，如果未将--db-only作为参数传递，那么还将创建JSON文档。 样例命令 time node index.js --sr-dir sr26/ --sqlite-db sr.db --es-export temp.out --...
MapWinGIS-32bit
09-27
MapWinGIS是一款开源的地理信息系统（GIS）组件，主要用于开发地图应用软件。它提供了一套API，使得开发者能够轻松地在Windows环境下构建GIS应用程序。MapWinGIS主要支持32位操作系统，因此“MapWinGIS-32bit”指的...
Orientation-dependent physical properties of layered perovskite La1.3Sr1.7Mn2O7 epitaxial thin films
02-07
In this paper, the resistivity and magnetization of orientation-engineered layered perovskite La1.3Sr1.7Mn2O7.epitaxial thin films have been investigated. Epitaxial thin films were deposited on single...
OnlyOne.zip
08-07
"OnlyOne.zip"中的项目可能是一个包含Spring Boot应用的示例，展示了如何集成和使用过滤器、拦截器和监听器。通过这个示例，开发者可以学习如何在Spring Boot环境中实现这些组件，从而提升应用的扩展性和功能性。...
html <a>链接按钮中<span class="sr-only">(current)</span>的作用
qq_44379844的博客
09-08 5379
<li class="active"> <a href="#">首页 <span class="sr-only">(current)</span></a></li>这是专门为残障人士浏览网页设计的。 在前端开发中，有些时候设计图上面会出现仅供正常视觉用户看的元素。比如：导航栏菜单当前页面选中高亮状态，这些...
Bootstrap中.sr-only的作用，属性效果以及源码分析，附带clip的解释
qq_44646447的博客
11-12 559
Bootstrap中.sr-only的作用，属性效果以及源码分析 我们来看一下网上对这个类的解释： 全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。 有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这...
bootstrap里的sr-only是什么属性？用途是什么？
hellochenlu的博客
12-18 2999
全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。 有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（s
bootstrap之sr-only作用
IT飞牛
03-20 228
sr-only：全称是 screen reader only，意为：(仅供)屏幕阅读器，这个 class 主要用于增强 accessbility(可访问性)。 有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。 他们上网使用的是屏幕阅读器，也就是 screen read...
前端设计小窍门之bootstrap－class.sr-only属性
chunchangbie4735的博客
08-05 464
class的sr-only属性是把元素对所有设备隐藏，除了屏幕阅读器。sr-only（screen reader）即屏幕阅读器。屏幕阅读器就是对残障人士看不到屏幕，借助阅读器读取屏幕内容时，读取相关内容，但是屏幕中不显示。如下例如： <form class="form-inline" ...
bootstrap中sr-only是什么属性？用途是什么？
weixin_33847182的博客
01-04 307
开发中经常发现bootStrap中有sr-only类，如下图 但是，好像在浏览器中并没有显现出什么效果。你作为正常用户觉得没效果就对了。 作用 这是专门为残障人士浏览网页设计的。 在前端开发中，有些时候设计图上面会出现仅供正常视觉用户看的元素。比如：导航栏菜单当前页面选中高亮状态，这些状态只有视力正常的人才能正常使用。 而残障人士，弱势...
.sr-only 给我的启示
SnowShenYong的博客
09-03 288
最近在使用adminLTE这个UI库开发一个物联网管理的后台界面,在开发的过程中看见一个地方使用了sr-only这个类名.按理说界面效果达到后就完成工作了,但是本着认真负责的态度还是想知道这个sr-only是怎么一回事. 原来这个UI库是基于Bootstrap,而这个sr-only类名就是源于Bootstrap.这是专门为残障人士浏览网页设计的一个功能。 在前端开发中，有些时候设计图上面...
Bootstrap中的属性 aria-hidden、sr-only、aria-labe、alert组件介绍
qq_41968486的博客
08-28 3716
看了两天的bootstrap，发现这就是一个前端的框架，让你做网站的时候套着用，看了看中文官网，bootstrap中文网 分为4个部分： 起步 全局css样式 组件 javascript插件 这几个内容，前两部分看看文档 ，会用就行， 不会的话就跟着敲。 在看全局CSS样式时 有几个属性 需要注意一下~~~~~~~~~·~ -----------------------------分割...
<span class="sr-only">Previous</span>是什么意思
05-19
`<span class="sr-only">Previous</span>` 是一个 HTML 标签，其中的 "sr-only" 是一个 CSS 类。它的作用是将页面中的某个元素隐藏，但仍然让屏幕阅读器等辅助工具读取该元素的内容，以提高网站的可访问性。在这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值