Bootstrap 组件：下拉菜单组件的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 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代码阻止用户点击链接。

---

就先分享到这里!! 😄 后续继续更新!!