5.1 Bootstrap下拉菜单
本节我们先介绍Bootstrap下拉菜单组件，主要包括标签、对齐方式、禁用和子菜单等方面的内容。
5.1.1 标签
顾名思义，下拉菜单是可用于展示可切换、有关联的菜单链接。创建下拉菜单需要使用上一章介绍过的HTML的列表标签（<ul>-<li>），且下拉菜单的触发器和整个下拉菜单都需要包裹在．dropdown类中，又或者声明为“position: relative; ”的其他页面元素中。
【代码5-1】是一个基本的下拉菜单组件设计（详见源代码ch05目录中ch05.dropdownMenu.html文件）：
01 <div class="bs-docs-example">
02 <div class="dropdown clearfix">
03 <ul class="dropdown-menu" role="menu" aria-
labelledby="dropdownMenu">
04 <li><a tabindex="-1" href="#">下拉菜单A</a></li>
05 <li><a tabindex="-1" href="#">下拉菜单B</a></li>
06 <li><a tabindex="-1" href="#">下拉菜单C</a></li>
07 <li class="divider"></li>
08 <li><a tabindex="-1" href="#">下拉菜单分割线D</a></li>
09 <li><a tabindex="-1" href="#">下拉菜单分割线E</a></li>
10 </ul>
11 </div>
12 </div>
【代码5-1】展示了一个基本下拉菜单组件，其中第03～10行代码通过<ul><li>列表标签创建了下拉菜单的基本元素，在第03行代码中通过为<ul>标签增加．dropdown-menu类将其定义为下拉菜单，页面效果如图5.1所示。
图5.1 基本下拉菜单
5.1.2 对齐方式
Bootstrap框架可以为下拉菜单选择不同的对齐方式，默认下拉菜单是左对齐的，如果使用．pull-right类则可以实现右对齐。
【代码5-2】是一个下拉菜单对齐方式的设计（详见源代码ch05目录中ch05.dropdownAlignMenu.html文件）：
01 <div class="dropdown clearfix">
02 <ul class="dropdown-menu pull-left " role="menu" aria-
labelledby="dropdownMenu">
03 <li><a tabindex="-1" href="#">左对齐下拉菜单A</a></li>
04 <li><a tabindex="-1" href="#">左对齐下拉菜单B</a></li>
05 <li class="divider"></li>
06 <li><a tabindex="-1" href="#">左对齐下拉菜单分割线C</a></li>
07 </ul>
08 </div>
09 <div class="dropdown clearfix">
10 <ul class="dropdown-menu pull-right" role="menu" aria-
labelledby="dropdownMenu">
11 <li><a tabindex="-1" href="#">右对齐下拉菜单A</a></li>
12 <li><a tabindex="-1" href="#">右对齐下拉菜单B</a></li>
13 <li class="divider"></li>
14 <li><a tabindex="-1" href="#">右对齐下拉菜单分割线C</a></li>
15 </ul>
16 </div>
上面的代码展示了页面主体的段落样式，其中第01～08行代码定义的是左对齐下拉菜单，其中第09～16行代码定义的是右对齐下拉菜单，页面效果如图5.2所示。
图5.2 下拉菜单对齐方式
5.1.3 禁用
如果需要禁用下拉菜单的某一项，可以在<li>标签内增加．disabled类来实现。
【代码5-3】是一个禁用下拉菜单项的设计（详见源代码ch05目录中ch05.disabledDropdownMenu.html文件）：
01 <div class="bs-docs-example">
02 <div class="dropdown clearfix">
03 <ul class="dropdown-menu" role="menu" aria-
labelledby="dropdownMenu">
04 <li><a tabindex="-1" href="#">下拉菜单A</a></li>
05 <li class="disabled"><a tabindex="-1" href="#">下拉菜单
B</a></li>
06 <li><a tabindex="-1" href="#">下拉菜单C</a></li>
07 <li class="divider"></li>
08 <li class="disabled"><a tabindex="-1" href="#">下拉菜单
分割线D</a></li>
09 <li><a tabindex="-1" href="#">下拉菜单分割线E</a></li>
10 </ul>
11 </div>
12 </div>
上面的代码演示了禁用下拉菜单项的设计，其中在第05行与第08行代码为<li>标签元素增加了．disabled类，页面效果如图5.3所示。
图5.3 禁用下拉菜单项
5.1.4 子下拉菜单
Bootstrap框架还支持为下拉菜单定义子下拉菜单，通过一些简单的定义就可以实现。另外，默认子菜单是向右下方弹出的，还可以通过定义样式实现向上弹出或者向左弹出子菜单。下面看示例代码。
【代码5-4】是一个增加默认子下拉菜单项的设计（详见源代码ch05目录中ch05.defaultSubDropdownMenu.html文件）：
01 <div class="bs-docs-example">
02 <div class="dropdown clearfix">
03 <ul class="dropdown-menu" role="menu" aria-
labelledby="dropdownMenu">
04 <li><a tabindex="-1" href="#">下拉菜单A</a></li>
05 <li><a tabindex="-1" href="#">下拉菜单B</a></li>
06 <li class="divider"></li>
07 <li class="dropdown-submenu">
08 <a tabindex="-1" href="#">弹出子下拉菜单</a>
09 <ul class="dropdown-menu">
10 <li><a tabindex="-1" href="#">子下拉菜单A</a></li>
11 <li><a tabindex="-1" href="#">子下拉菜单B</a></li>
12 <li><a tabindex="-1" href="#">子下拉菜单C</a></li>
13 </ul>
14 </li>
15 </ul>
16 </div>
17 </div>
【代码5-4】演示了定义子下拉菜单项的设计，其中在第07～14行代码通过增加<ul><li>标签组实现了一个子下拉菜单，页面效果如图5.4所示。
图5.4 默认子下拉菜单
【代码5-5】是一个向上弹出子下拉菜单项的设计（详见源代码ch05目录中ch05.subDropupMenu.html文件）：
01 <div class="bs-docs-example">
02 <div class="dropup clearfix">
03 <ul class="dropdown-menu" role="menu" aria-
labelledby="dropdownMenu">
04 <li><a tabindex="-1" href="#">下拉菜单A</a></li>
05 <li><a tabindex="-1" href="#">下拉菜单B</a></li>
06 <li class="divider"></li>
07 <li class="dropdown-submenu">
08 <a tabindex="-1" href="#">向上弹出子下拉菜单</a>
09 <ul class="dropdown-menu">
10 <li><a tabindex="-1" href="#">子下拉菜单A</a></li>
11 <li><a tabindex="-1" href="#">子下拉菜单B</a></li>
12 <li><a tabindex="-1" href="#">子下拉菜单C</a></li>
13 </ul>
14 </li>
15 </ul>
16 </div>
17 </div>
【代码5-5】演示了定义向上弹出子下拉菜单项的设计，其中在第02行代码中通过定义．dropup类实现了向上弹出子下拉菜单的样式，页面效果如图5.5所示。
图5.5 向上弹出子下拉菜单
【代码5-6】是一个向左弹出子下拉菜单项的设计（详见源代码ch05目录中ch05.subDropleftMenu.html文件）：
01 <div class="bs-docs-example">
02 <div class="dropdown clearfix">
03 <ul class="dropdown-menu pull-right" role="menu" aria-
labelledby="dropdownMenu">
04 <li><a tabindex="-1" href="#">下拉菜单A</a></li>
05 <li><a tabindex="-1" href="#">下拉菜单B</a></li>
06 <li class="divider"></li>
07 <li class="dropdown-submenu pull-left">
08 <a tabindex="-1" href="#">向左弹出子下拉菜单</a>
09 <ul class="dropdown-menu">
10 <li><a tabindex="-1" href="#">子下拉菜单A</a></li>
11 <li><a tabindex="-1" href="#">子下拉菜单B</a></li>
12 <li><a tabindex="-1" href="#">子下拉菜单C</a></li>
13 </ul>
14 </li>
15 </ul>
16 </div>
17 </div>
【代码5-6】演示了定义向左弹出子下拉菜单项的设计，为了演示效果先在第03行代码中通过定义．pull-right类将整个下拉菜单右对齐，然后在第07行代码通过定义．pull-left类实现了向左弹出子下拉菜单的样式，页面效果如图5.6所示。
图5.6 向左弹出子下拉菜单