bootstrap下拉

灰太狼 2022-06-04 10:05 164阅读 0赞

## aria-label ##

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

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.      **<****meta** charset = "utf-8"**>**  
5.      **<****title****>**demo**</****title****>**  
6.      **<****link** href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"**>**  
7.      **<****style** type="text/css"**>**  
8.          body\{padding: 20px;\}  
9.      **</****style****>**  
10. **</****head****>**  
11. **<****body****>**  
12.     **<****form** role = "form"**>**  
13.         **<****div** class="form-group col-lg-3 form-horizontal"**>**  
14.             **<****label** for = "idCard" class="control-label col-lg-5"**>**身份证号：**</****label****>**  
15.             **<****div** class="col-lg-7"**>**  
16.                 **<****input** type = "text" id = "idCard" class="form-control"**>**  
17.             **</****div****>**          
18.         **</****div****>**      
19.     **</****form****>**  
20. **</****body****>**  
21. **</****html****>**

![Center][]

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

如：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****body****>**  
2.      **<****form** role = "form"**>**  
3.          **<****div** class="form-group col-lg-3 form-horizontal"**>**  
4.              **<****div** class="col-lg-7"**>**  
5.                  **<****input** type = "text" id = "idCard" class="form-control" aria-label = "身份证号"**>**  
6.              **</****div****>**          
7.          **</****div****>**      
8.      **</****form****>**  
9.  **</****body****>**

![Center 1][]

## aria-labelledby属性    ##

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

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

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****body****>**  
2.      **<****div** class="dropdown"**>**  
3.         **<****button** type="button" class="btn dropdown-toggle" id="dropdownMenu1"   
4.            data-toggle="dropdown"**>**  
5.            选择您的职位  
6.            **<****span** class="caret"**>****</****span****>**  
7.         **</****button****>**  
8.         **<****ul** class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"**>**  
9.            **<****li** role="presentation"**>**  
10.              **<****a** role="menuitem" tabindex="-1" href="\#"**>**测试工程师**</****a****>**  
11.           **</****li****>**  
12.           **<****li** role="presentation"**>**  
13.              **<****a** role="menuitem" tabindex="-1" href="\#"**>**开发工程师**</****a****>**  
14.           **</****li****>**  
15.           **<****li** role="presentation"**>**  
16.              **<****a** role="menuitem" tabindex="-1" href="\#"**>**销售工程师**</****a****>**  
17.           **</****li****>**            
18.        **</****ul****>**  
19.     **</****div****>**  
20. **</****body****>**

![Center 2][]

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

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

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

## 用法： ##

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

**\[html\]**  [view plain][view plain 1]   [copy][view plain 1]

[print][view plain 1] [?][view plain 1]

1.  <!doctype html**>**  
2.  **<****html** lang="en"**>**  
3.  **<****head****>**  
4.        
5.      **<****meta** http-equiv="content-type" content="text/html;charset=utf-8" **/>**  
6.      **<****meta** http-equiv="X-UA-Compatible" content="IE=edge"**>**  
7.      **<****meta** name="Keywords" content="关键词一，关键词二"**>**  
8.      **<****meta** name="Description" content="网站描述内容"**>**  
9.      **<****meta** name="Author" content="Yvette Lau"**>**  
10.     **<****meta** name = "viewport" content = " width = device-width, initial-scale = 1 "**>**  
11.     **<****title****>**BootstrapDemo**</****title****>**  
12.       
13.     **<****link** rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"**>**  
14.     **<****script** type="text/javascript" src = "../jquery-1.11.2.min.js"**>****</****script****>**  
15.     **<****script** type="text/javascript" src = "../bootstrap-3.3.5-dist/js/bootstrap.min.js"**>****</****script****>**  
16. **</****head****>**  
17.     **<****body** style="padding: 20px;"**>**  
18.         **<****div** class="dropdown"**>**  
19.             **<****a** data-toggle = "dropdown" href="\#"**>**下拉菜单**</****a****>**  
20.             **<****ul** class="dropdown-menu" role = "menu"**>**  
21.                 **<****li****>****<****a** href="\#"**>**测试工程师**</****a****>****</****li****>**                
22.                 **<****li****>****<****a** href="\#"**>**开发工程师**</****a****>****</****li****>**  
23.                 **<****li****>**销售经理**</****li****>**  
24.             **</****ul****>**  
25.         **</****div****>**  
26.     **</****body****>**  
27. **</****html****>**

![Center 3][]

我们不使用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][view plain 1]   [copy][view plain 1]

[print][view plain 1] [?][view plain 1]

1.  **<****body** style="padding: 20px;"**>**  
2.      **<****div** class="dropdown"**>**  
3.          **<****button** type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu"**>**下拉菜单  
4.              **<****span** class = "caret"**>****</****span****>**  
5.          **</****button****>**  
6.            
7.          **<****ul** class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu"**>**  
8.                
9.              **<****li** role = "presentation"**>****<****a** href="\#"**>**测试工程师**</****a****>****</****li****>**                  
10.             **<****li** role = "presentation"**>****<****a** href="\#"**>**开发工程师**</****a****>****</****li****>**  
11.             **<****li** role = "presentation"**>****<****a** href="\#"**>**销售经理**</****a****>****</****li****>**  
12.             **<****li** role = "presentation" class="divider"**>****</****li****>**  
13.             **<****li** role = "presentation"**>****<****a** href="\#"**>**质量工程师**</****a****>****</****li****>**  
14.             **<****li** role = "presentation"**>****<****a** href="\#"**>**项目经理**</****a****>****</****li****>**  
15.         **</****ul****>**  
16.     **</****div****>**  
17. **</****body****>**

![Center 4][]

## 对齐： ##

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

**\[html\]**  [view plain][view plain 1]   [copy][view plain 1]

[print][view plain 1] [?][view plain 1]

1.  **<****body** style="padding: 20px;"**>**  
2.      **<****div** class="dropdown"**>**  
3.          **<****button** type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu"**>**下拉菜单  
4.              **<****span** class = "caret"**>****</****span****>**  
5.          **</****button****>**  
6.            
7.          **<****ul** class="dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu"**>**  
8.                
9.              **<****li** role = "presentation"**>****<****a** href="\#"**>**测试工程师**</****a****>****</****li****>**                  
10.             **<****li** role = "presentation"**>****<****a** href="\#"**>**开发工程师**</****a****>****</****li****>**  
11.             **<****li** role = "presentation"**>****<****a** href="\#"**>**销售经理**</****a****>****</****li****>**  
12.             **<****li** role = "presentation" class="divider"**>****</****li****>**  
13.             **<****li** role = "presentation"**>****<****a** href="\#"**>**质量工程师**</****a****>****</****li****>**  
14.             **<****li** role = "presentation"**>****<****a** href="\#"**>**项目经理**</****a****>****</****li****>**  
15.         **</****ul****>**  
16.     **</****div****>**  
17. **</****body****>**

![Center 5][]

## 下拉菜单标题： ##

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

**\[html\]**  [view plain][view plain 1]   [copy][view plain 1]

[print][view plain 1] [?][view plain 1]

1.  **<****body** style="padding: 20px;"**>**  
2.      **<****div** class="dropdown"**>**  
3.          **<****button** type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu"**>**下拉菜单  
4.              **<****span** class = "caret"**>****</****span****>**  
5.          **</****button****>**  
6.            
7.          **<****ul** class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu"**>**  
8.                
9.              **<****li** role = "presentation" class="dropdown-header"**>**下拉菜单标题**</****li****>**  
10.             **<****li** role = "presentation"**>****<****a** href="\#"**>**测试工程师**</****a****>****</****li****>**                  
11.             **<****li** role = "presentation"**>****<****a** href="\#"**>**开发工程师**</****a****>****</****li****>**  
12.             **<****li** role = "presentation"**>****<****a** href="\#"**>**销售经理**</****a****>****</****li****>**  
13.             **<****li** role = "presentation" class="divider"**>****</****li****>**  
14.             **<****li** role = "presentation" class="dropdown-header"**>**下拉菜单标题**</****li****>**  
15.             **<****li** role = "presentation"**>****<****a** href="\#"**>**质量工程师**</****a****>****</****li****>**  
16.             **<****li** role = "presentation"**>****<****a** href="\#"**>**项目经理**</****a****>****</****li****>**  
17.         **</****ul****>**  
18.     **</****div****>**  
19. **</****body****>**

![Center 6][]

[view plain]: http://blog.csdn.net/liuyan19891230/article/details/50452835#
[Center]: /images/20220604/6c521cf8d6e949e0b31a85310729f2f1.png
[Center 1]: /images/20220604/778ae24e0b4b478fa9e6b4c796105ce9.png
[Center 2]: /images/20220604/8005486ab84247a3adf8e1d6c271a732.png
[view plain 1]: http://blog.csdn.net/liuyan19891230/article/details/50455326#
[Center 3]: /images/20220604/aa3fcc0645ca41f488eaefd5cb83e63f.png
[Center 4]: /images/20220604/34fd818e64f343df965b39d2271536d5.png
[Center 5]: /images/20220604/d1aef65bc1db476e8d18ff412db9bcb8.png
[Center 6]: /images/20220604/82c7bd19c6824288a55144ef68db34a3.png