柠檬铺

下拉菜单是我们会在网站建设项目中经常用到的一种组件，当然，在Bootstrap中也提供了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"。

写在文章最后

Bootstrap下拉菜单组件的引入使得制作菜单不需要再那么大费脑力去实现下拉效果了，可以说是非常实用高效，赶紧来试试吧。