1.引用Bootstrap

　　示例引用的Bootstrap版本：v3.3.7

<script src="~/Scripts/jquery-2.2.4.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

 2.基本实例

2.1 示例代码

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜单项1</a></li><li><a href="#">菜单项2</a></li><li><a href="#">菜单项3</a></li></ul> </div>

　　.dropdown：定义下拉菜单框

　　.dropdown-toggle：定义下拉菜单的触发元素

　　data-toggle="dropdown"：触发下拉菜单

　　.dropdown-menu：定义下拉菜单条面板

2.2 示例效果

3.设置选项

3.1右对齐菜单

　　默认下拉菜单为左对齐显式，在.dropdown-menu元素中添加.dropdown-menu-right设置右对齐下拉菜单，添加.dropdown-menu-left设置左对齐下拉菜单。

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right"><li><a href="#">菜单项1</a></li><li><a href="#">菜单项2</a></li><li><a href="#">菜单项3</a></li></ul> </div>

3.2 禁用菜单项

　　在下拉菜单中的<li>标签添加.disabled，禁用菜单项。

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜单项1</a></li><li class="disabled"><a href="#">菜单项2</a></li><li><a href="#">菜单项3</a></li></ul> </div>

3.3 设计菜单分隔线

　　在下拉菜单中添加.divider的<li>标签，即在下拉菜单中插入一条分隔线。

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜单项1</a></li><li><a href="#">菜单项2</a></li><li class="divider"></li><li><a href="#">菜单项3</a></li></ul> </div>

3.4 设计向上弹出菜单

　　下拉菜单组件框改为.dropup，即可让下拉菜单向上弹出。

<div class="dropup"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜单项1</a></li><li><a href="#">菜单项2</a></li><li class="divider"></li><li><a href="#">菜单项3</a></li></ul> </div>

转载于:https://www.cnblogs.com/libingql/p/5840460.html

总结

以上是生活随笔为你收集整理的Bootstrap3系列：下拉菜单的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。