Bootstrap下拉菜单使用方法

如何使用Bootstrap下拉菜单组件

Bootstrap下拉菜单组件使用起来非常容易，首先你需要定义一个class="dropdown"的div，然后在这个div标签中写入触发下拉框的按钮以及对应的下拉菜单，类似代码如下：<div class="dropdown"><button class="btn dropdown-toggle" data-toggle="dropdown"> 下拉按钮</button><ul class="dropdown-menu" ><li><a role="menuitem" tabindex="-1" href="#">下拉菜单1</a></li><li><a role="menuitem" tabindex="-1" href="#">下拉菜单2</a></li><li><a role="menuitem" tabindex="-1" href="#">下拉菜单3</a></li></ul></div>

Bootstrap下拉菜单样式

下拉菜单默认是左对齐的，如果你想要让文字右对齐，也非常容易，在ul中加入text-right样式即可：<ul class="dropdown-menu text-right"> ... </ul>

Bootstrap下拉菜单头样式

如果你想要把下拉菜单分类，每个分类都需要有一个菜单头进行解释说明，那么直接引用菜单头样式即可：<ul class="dropdown-menu"><li role="presentation" class="dropdown-header">下拉菜单头</li>...<li role="presentation" class="divider"></li><li role="presentation" class="dropdown-header">下拉菜单头</li>...</ul>

Bootstrap下拉菜单禁用样式

如果你想要把某条下拉菜单禁用掉，直接调用disabled样式即可：<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单1</a></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">禁用菜单样式</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单2</a></li></ul>

Bootstrap下拉菜单与JS结合

以上的样式还处于静态化，并未引入JS交互，当你想要点击按钮以控制下拉菜单的显示与否，应该怎么做？
首先你需要在页面头部引入Bootstrap的JS文件，之后你便可以通过上面的代码实现JS控制下拉菜单的显示与隐藏。
需要说明的是，由于JS中是采用data-toggle作为选择器的，所以一定要在按钮中加入属性data-toggle="dropdown"。