1.源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/Popper.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>Title</title>
</head>
<body>
<!--图片标签-->
<!--<span class="glyphicon glyphicon-search"></span>-->
<div class="container">
<!--pull-right右侧显示，要与ul标签里面的dropdown-menu-right搭配使用-->
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
下拉菜单
<span class="caret" ></span>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownmenu1">
<!--分割-->
<!--<li role="presentation" class="dropdown-header">大写的一到四</li>-->
<li><a href="#" role="menuitem">一</a> </li>
<li><a href="#" role="menuitem">二</a> </li>
<li><a href="#" role="menuitem">三</a> </li>
<li><a href="#" role="menuitem">四</a> </li>
<!--分割-->
<!--<li role="presentation" class="dropdown-header">1-4</li>-->
<li role="presentation" class="divider"></li>
<li><a href="#" role="menuitem">1</a> </li>
<li><a href="#" role="menuitem">2</a> </li>
<!--class="disabled"禁止使用-->
<li class="disabled"><a href="#" role="menuitem">3</a> </li>
<li><a href="#" role="menuitem">4</a> </li>
</ul>
</button>
</div>
</div>
</body>
</html>
2.界面
