Bootstrap是啥意思?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap是啥意思?相关的知识,希望对你有一定的参考价值。

参考技术A Bootstrap是一个多义词,请在下列义项中选择浏览(共7个义项)
▪英文单词▪计算机术语▪Web前端CSS框架▪生活用语▪进化树▪统计学▪引导协议

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/html框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。本回答被提问者和网友采纳

bootstrap的aria-label属性以及aria-labelledby属性是啥意思

请大神能详细点回答,谢谢。

aria-label

正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。

如:<!DOCTYPE html> 

<html> 

<head> 

<meta charset = "utf-8"> 

<title>demo</title> 

<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> 

<style type="text/css"> 

bodypadding: 20px; 

</style> 

</head> 

<body> 

<form role = "form"> 

<div class="form-group col-lg-3 form-horizontal"> 

<label for = "idCard" class="control-label col-lg-5">身份证号:</label> 

<div class="col-lg-7"> 

<input type = "text" id = "idCard" class="form-control"> 

</div>   

</div>  

</form> 

</body> 

</html> 

但是如果我们没有给输入框设置label时,当其获得焦点时,屏幕阅读器会读出aria-label属性的值,aria-label不会在视觉上呈现效果。

如:

<body> 

<form role = "form"> 

<div class="form-group col-lg-3 form-horizontal"> 

<div class="col-lg-7"> 

<input type = "text" id = "idCard" class="form-control" aria-label = "身份证号"> 

</div>   

</div>  

</form> 

</body> 

当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:

当ul获取到焦点时,屏幕阅读器是会读:“选择您的职位”

<body> 

<div class="dropdown"> 

<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 

data-toggle="dropdown"> 

选择您的职位 

<span class="caret"></span> 

</button> 

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 

<li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#">测试工程师</a> 

</li> 

<li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#">开发工程师</a> 

</li> 

<li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#">销售工程师</a> 

</li>   

</ul> 

</div> 

</body> 

PS:如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容

参考技术A 如:<input type=”text” aria-label=”用户名”/>

此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”。

以上来自百度,第一条就是。
http://accessibilityunion.org/archives/808
参考技术B 应该是为视力障碍的人播放语音而使用的。

以上是关于Bootstrap是啥意思?的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap是啥意思?

bootstrap是啥意思

“自己进行主机引导”是啥意思?

bootstrap的aria-label属性以及aria-labelledby属性是啥意思

bootstrap table中formatter作用是啥

链轮中的链轮是啥意思