bootstrap下拉

来源：互联网发布：三菱plc编程软件免费下载编辑：程序博客网时间：2024/06/07 12:55

aria-label

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

[html] view plain copy
 print?
<!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">  
        body{padding: 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不会在视觉上呈现效果。

如：

[html] view plain copy
 print?
<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属性

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

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

[html] view plain copy
 print?
<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的内容

使用下拉菜单（Dropdown）插件，可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

如果想要单独引用该插件的功能，那么需要引用 dropdown.js。或者可以引入bootstrap.js或压缩版的bootstrap.min.js。

用法：

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

[html] view plain copy
 print?
<!doctype html>  
<html lang="en">  
<head>  
    <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->  
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="Keywords" content="关键词一，关键词二">  
    <meta name="Description" content="网站描述内容">  
    <meta name="Author" content="Yvette Lau">  
    <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">  
    <title>BootstrapDemo</title>  
    <!--css js 文件的引入-->  
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">  
    <script type="text/javascript" src = "../jquery-1.11.2.min.js"></script>  
    <script type="text/javascript" src = "../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>  
</head>  
    <body style="padding: 20px;">  
        <div class="dropdown">  
            <a data-toggle = "dropdown" href="#">下拉菜单</a>  
            <ul class="dropdown-menu" role = "menu">  
                <li><a href="#">测试工程师</a></li>                
                <li><a href="#">开发工程师</a></li>  
                <li>销售经理</li>  
            </ul>  
        </div>  
    </body>  
</html>  

我们不使用a标签时，可以看出，排版和使用了a标签是不一样的，通过审查元素可以看出，css中对.dropdown-menu>li>a是设置了样式的。

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

分割线：

给li加上class = "divider"

[html] view plain copy
 print?
<body style="padding: 20px;">  
    <div class="dropdown">  
        <button type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜单  
            <span class = "caret"></span>  
        </button>  
        <!-- aria-labelledby一般用在区域元素上，对应的id一般为对应的标题或是标签元素的id.关系型属性 -->  
        <ul class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu">  
            <!-- role = "presentation"表示陈述 -->  
            <li role = "presentation"><a href="#">测试工程师</a></li>                  
            <li role = "presentation"><a href="#">开发工程师</a></li>  
            <li role = "presentation"><a href="#">销售经理</a></li>  
            <li role = "presentation" class="divider"></li>  
            <li role = "presentation"><a href="#">质量工程师</a></li>  
            <li role = "presentation"><a href="#">项目经理</a></li>  
        </ul>  
    </div>  
</body>  

对齐：

通过给.dropdown-menu 加上class pill-right可以使其向右对齐。

[html] view plain copy
 print?
<body style="padding: 20px;">  
    <div class="dropdown">  
        <button type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜单  
            <span class = "caret"></span>  
        </button>  
        <!-- aria-labelledby一般用在区域元素上，对应的id一般为对应的标题或是标签元素的id.关系型属性 -->  
        <ul class="dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu">  
            <!-- role = "presentation"表示陈述 -->  
            <li role = "presentation"><a href="#">测试工程师</a></li>                  
            <li role = "presentation"><a href="#">开发工程师</a></li>  
            <li role = "presentation"><a href="#">销售经理</a></li>  
            <li role = "presentation" class="divider"></li>  
            <li role = "presentation"><a href="#">质量工程师</a></li>  
            <li role = "presentation"><a href="#">项目经理</a></li>  
        </ul>  
    </div>  
</body>  

下拉菜单标题：

通过给li添加class dropdown-header给下拉菜单的标签区域添加标题（注意，li中不嵌套a标签）

[html] view plain copy
 print?
<body style="padding: 20px;">  
    <div class="dropdown">  
        <button type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜单  
            <span class = "caret"></span>  
        </button>  
        <!-- aria-labelledby一般用在区域元素上，对应的id一般为对应的标题或是标签元素的id.关系型属性 -->  
        <ul class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu">  
            <!-- role = "presentation"表示陈述 -->  
            <li role = "presentation" class="dropdown-header">下拉菜单标题</li>  
            <li role = "presentation"><a href="#">测试工程师</a></li>                  
            <li role = "presentation"><a href="#">开发工程师</a></li>  
            <li role = "presentation"><a href="#">销售经理</a></li>  
            <li role = "presentation" class="divider"></li>  
            <li role = "presentation" class="dropdown-header">下拉菜单标题</li>  
            <li role = "presentation"><a href="#">质量工程师</a></li>  
            <li role = "presentation"><a href="#">项目经理</a></li>  
        </ul>  
    </div>  
</body>  

阅读全文

0 0