上QQ阅读APP看书，第一时间看更新
5.3 Bootstrap按钮式下拉菜单
本节介绍Bootstrap框架的按钮式下拉菜单，其实按钮式下拉菜单是在前面下拉菜单和按钮组内容基础上组合而成的，设计人员可以将下拉菜单与按钮组的样式通过组合的方式加入到按钮式下拉菜单中。下面看一段按钮式下拉菜单的代码示例。
【代码5-10】是一个按钮式下拉菜单的设计（详见源代码ch05目录中ch05.btnGroupDropdownMenu.html文件）：
01 <div class="bs-docs-example">
02 <div class="btn-toolbar" style="margin: 0; ">
03 <div class="btn-group">
04 <button class="btn dropdown-toggle" data-
toggle="dropdown">按钮式下拉菜单
05 <span class="caret"></span>
06 </button>
07 <ul class="dropdown-menu">
08 <li><a href="#">Button Menu A</a></li>
09 <li><a href="#">Button Menu B</a></li>
10 <li class="divider"></li>
11 <li><a href="#">Button Menu C</a></li>
12 </ul>
13 </div><! -- /btn-group -->
14 <div class="btn-group">
15 <button class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">Action
16 <span class="caret"></span>
17 </button>
18 <ul class="dropdown-menu">
19 <li><a href="#">Button Menu A</a></li>
20 <li><a href="#">Button Menu B</a></li>
21 <li class="divider"></li>
22 <li><a href="#">Button Menu C</a></li>
23 </ul>
24 </div><! -- /btn-group -->
25 <div class="btn-group">
26 <button class="btn btn-danger dropdown-toggle" data-
toggle="dropdown">Danger
27 <span class="caret"></span>
28 </button>
29 <ul class="dropdown-menu">
30 <li><a href="#">Button Menu A</a></li>
31 <li><a href="#">Button Menu B</a></li>
32 <li class="divider"></li>
33 <li><a href="#">Button Menu C</a></li>
34 </ul>
35 </div><! -- /btn-group -->
36 <div class="btn-group">
37 <button class="btn btn-warning dropdown-toggle" data-
toggle="dropdown">Warning
38 <span class="caret"></span>
39 </button>
40 <ul class="dropdown-menu">
41 <li><a href="#">Button Menu A</a></li>
42 <li><a href="#">Button Menu B</a></li>
43 <li class="divider"></li>
44 <li><a href="#">Button Menu C</a></li>
45 </ul>
46 </div><! -- /btn-group -->
47 <div class="btn-group">
48 <button class="btn btn-success dropdown-toggle" data-
toggle="dropdown">Success
49 <span class="caret"></span>
50 </button>
51 <ul class="dropdown-menu">
52 <li><a href="#">Button Menu A</a></li>
53 <li><a href="#">Button Menu B</a></li>
54 <li class="divider"></li>
55 <li><a href="#">Button Menu C</a></li>
56 </ul>
57 </div><! -- /btn-group -->
58 <div class="btn-group">
59 <button class="btn btn-info dropdown-toggle" data-
toggle="dropdown">Info
60 <span class="caret"></span>
61 </button>
62 <ul class="dropdown-menu">
63 <li><a href="#">Button Menu A</a></li>
64 <li><a href="#">Button Menu B</a></li>
65 <li class="divider"></li>
66 <li><a href="#">Button Menu C</a></li>
67 </ul>
68 </div><! -- /btn-group -->
69 <div class="btn-group">
70 <button class="btn btn-inverse dropdown-toggle" data-
toggle="dropdown">Inverse
71 <span class="caret"></span>
72 </button>
73 <ul class="dropdown-menu">
74 <li><a href="#">Button Menu A</a></li>
75 <li><a href="#">Button Menu B</a></li>
76 <li class="divider"></li>
77 <li><a href="#">Button Menu C</a></li>
78 </ul>
79 </div><! -- /btn-group -->
80 </div><! -- /btn-toolbar -->
81 </div>
关于【代码5-10】的分析如下：
第02～80行代码通过．btn-toolbar类定义了一个工具条按钮组。
第03～13行代码通过．btn-group类定义了一个按钮组。
第04～06行代码通过．dropdown-toggle类定义了一个按钮，其中第05行代码通过．caret类定义了按钮的下拉箭头。
第07～12行代码通过．dropdown-menu类定义了一个下拉菜单。
这样，第03～13行代码就组成了一个基本样式的按钮式下拉菜单；而第14～24行代码、第25～35行代码、第36～46行代码、第47～57行代码、第58～68行代码和第69～79行代码与第03～13行代码类似，组成了仅仅是样式不同的按钮式下拉菜单。
【代码5-10】页面效果如图5.10所示。
图5.10 按钮式下拉菜单