Bootstrap下拉菜单使用方法

如何使用Bootstrap下拉菜单组件

Bootstrap下拉菜单组件使用起来非常容易，首先你需要定义一个class="dropdown"的div，然后在这个div标签中写入触发下拉框的按钮以及对应的下拉菜单，类似代码如下：

下拉按钮

• 下拉菜单1
• 下拉菜单2
• 下拉菜单3

Bootstrap下拉菜单样式

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

...

Bootstrap下拉菜单头样式

如果你想要把下拉菜单分类，每个分类都需要有一个菜单头进行解释说明，那么直接引用菜单头样式即可：

• 下拉菜单头
...
• 下拉菜单头
...

Bootstrap下拉菜单禁用样式

如果你想要把某条下拉菜单禁用掉，直接调用disabled样式即可：

• 下拉菜单1
• 禁用菜单样式
• 下拉菜单2

Bootstrap下拉菜单与JS结合

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