开发者学堂课程【前端开发框架Bootstrap使用教程：Bootstrap 组件_下拉菜单】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4239
Bootstrap 组件_下拉菜单
目录：
一、实例
二、对齐
三、标题
四、分割线
五、禁用的菜单项
一、实例
用于显示链接列表的可切换、有上下文的菜单。
下拉的 JavaScript 插件让它具有了交互性。
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position:relative； 的元素。然后加入组成菜单的 HTML 代码。
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下的）。
我们来举个例子，创建新的文件，命名 dropdown ，
给它个标题“<title>下拉菜单<title>”
，引入文件
<link herf ="bootstrap.min.css"rel="stylesheet/"> ，
然后需要注意的是引入菜单栏需要我们的引入键，我们在这里引入<script src="jquery-2.2.1. min.js"></script>，然后引入<script src="bootstrap. min.js"></script>，
写一个<div class="container">
写入一个<div class="dropdown">，
再写一个<button type="button" class="btn btn-default" dropdown-toggle" data-toggle="dropdown" aria-explanded="false">
地铁线路
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a herf="＃">1</a></li>
<li><a herf="＃">1</a></li>
<li><a herf="＃">1</a></li>
<li><a herf="＃">1</a></li>
执行看效果，看到地铁路线的按钮，点击，会有四个总得项目，这就是我们下拉菜单。
二、对齐
在默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为100％宽度。
为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单对齐。
1、可能需要额外的定位 May require additional positioning
在正常的文档流中，通过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会由于设置了 overflow 属性的父元素而被部分遮挡或超出视口（viewport）的显示范围。如果出现这种问题，请自行解决。
2、不建议使用 .pull-right
从 v3.1.0版本开始，我们不再建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐，请使用 .dropdown-menu-right 类。导航条中如需添加右对齐的导航（dav）组件，请使用 .pull-right 的 mixin 的版本，可以自动对齐菜单。
如需左对齐，请使用 .dropdown-menu-left 类。
三、标题
在任何下拉菜单中均可通过添加标题来表明一组动作。
四、分割线
为下拉菜单添加一条分割线，用于将多个链接分组。
五、禁用的菜单项
为下拉菜单中的 <li> 元素添加 .disabled 类 ，从而禁用相应的菜单项。
