下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。
文档:/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>