作者:
WangMin
格言:努力做好自己喜欢的每一件事
用于显示链接列表的可切换、有上下文的菜单。如果要实现下拉菜单的交互性， 要使用JavaScript 。
实例
将下拉菜单按钮触发器和下拉菜单都包裹在.dropdown里，或者另一个添加了position: relative;的元素。然后加入组成菜单的 HTML 代码。
为下拉菜单的父元素设置.dropdown类，菜单向下弹出:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
为下拉菜单的父元素设置.dropup类，菜单向上弹出（默认是向下弹出的）：
<div class="dropup">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
对齐
默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。给.dropdown-menu添加.dropdown-menu-right类可以让菜单右对齐。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
标题
如果在下拉菜单中有几组不同的动作，可以通过添加标题（也就是在需要设为标题的标签上添加类 .dropdown-header ）来区分一组动作。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
<li class="dropdown-header">第一部分</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li class="dropdown-header">第二部分</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
分割线
为下拉菜单添加一条分割线，也就是在需要分割的标签之前添加类 .divider ，还需要添加role="separator"这个属性，用于将多个链接分组。它的作用跟标题差不多。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
<li>two</li>
<li>three</li>
<li>four</li>
<li class="divider" role="separator"></li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
禁用菜单选项
为下拉菜单中的<li>元素添加.disabled类，从而禁用相应的菜单项，让该菜单项的链接变灰并失去鼠标悬停效果。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
<li><a href="#">常规链接</a></li>
<li class="disabled"><a href="#">禁用链接</a></li>
<li><a href="#">其他链接</a></li>
</ul>
</div>
注意：被禁用的链接仍然可以点击，除非你去掉链接的 href 属性，或者使用JavaScript代码阻止用户点击链接。
就先分享到这里!! :smile: 后续继续更新!!
