|
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
文档：http://www.runoob.com/bootstrap/bootstrap-dropdowns.html
使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。
效果图：
源代码：
必须加入bootstrap样式,主题，JS和jquery!
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
<!--必须在bootstrap.js之前，否则无效果!-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body {
padding: 10px;
}
</style>
<div class="dropdown">
<!--data-toggle="dropdown" 默认是隐藏哦,自动的触发事件下拉;-->
<a href="#" class="btn btn-lg btn-success" data-toggle="dropdown">下拉菜单<i class="caret"></i></a>
<ul class="dropdown-menu">
<li>
<a href="#">aaa</a>
</li>
<li>
<a href="#">bbb</a>
</li>
<li>
<a href="#">ccc</a>
</li>
</ul>
</div>
<p></p>
<!-- <p>可以是超链接或按钮</p>-->
<div class="dropdown">
<a href="#" data-toggle="dropdown">请激活下拉列表</a>
<ul class="dropdown-menu">
<!--<ul class="dropdown-menu pull-right">-->
<li class="dropdown-header">姓名1</li>
<li>
<a href="#">mike</a>
</li>
<li class="disabled">
<a href="#" >john禁用</a>
</li>
<!--分割线-->
<li class="divider">
</li>
<li class="dropdown-header">姓名2</li>
<li >
<a href="#">back</a>
</li>
</ul>
</div>
| 
转播
