Bootstrap 下拉菜单
下拉菜单把一组选项收纳在触发器下方，点击后展开、点击别处收起。它由三部分拼装：外层容器 dropdown、触发器 dropdown-toggle、菜单 dropdown-menu，且必须引入 Bootstrap 的 JS 文件才能工作。
页面基础
先准备完整骨架：head 中引入 bootstrap.min.css，body 末尾引入 jQuery 与 bootstrap.min.js（链接详见环境安装篇）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>下拉菜单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
基础下拉菜单
按钮上加 dropdown-toggle 与 data-toggle="dropdown"，紧跟着 dropdown-menu，其中每个选项是带 a 的 li。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
请选择 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
</ul>
</div>
<!-- 效果：点击"请选择"按钮弹出三个选项，点击选项或空白处自动收起 -->
标题与分割线
dropdown-header 作为分组小标题，divider 画一条横线把菜单分组。以下片段展示 dropdown-menu 的内部结构，可替换上例中的 ul 内容再预览。
<ul class="dropdown-menu">
<li class="dropdown-header">基础操作</li>
<li><a href="#">新建</a></li>
<li><a href="#">编辑</a></li>
<li class="divider"></li>
<li class="dropdown-header">危险操作</li>
<li><a href="#">删除</a></li>
</ul>
<!-- 效果：菜单顶部出现两组灰色小标题，两组之间有一条分隔横线 -->
选中与禁用态
active 让选项高亮为选中，disabled 让选项变灰且点击无效，适合表达"当前项/不可用项"。
<ul class="dropdown-menu">
<li class="active"><a href="#">简体中文</a></li>
<li><a href="#">English</a></li>
<li class="disabled"><a href="#">繁體中文</a></li>
</ul>
<!-- 效果：简体中文高亮为选中状态，繁體中文灰显且不可点击 -->
小结
下拉菜单结构固定、样式全靠 class，学会 dropdown + dropdown-toggle + dropdown-menu 组合即可随处复用。更多变体（按钮下拉、向上弹出）在按钮相关章节继续展开。