<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="dropdown pull-right">
<!--class="dropdown pull-right" 显示在右
-->
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<!--class="dropdown-menu dropdown-menu-right" 显示在右
--
-->
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<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>
</ul>
</div>
</div>
<!--引入js 先jquery 后bootstrap-->
<script src="../jquery.min.js"></script>
<script src="../bootstrap-3.4.1/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>
分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="dropdown">
<!--class="dropdown pull-right" 显示在右
-->
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<!--class="dropdown-menu dropdown-menu-right" 显示在右
--
-->
<ul class="dropdown-menu" 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">数字</li>
<li><a href="#" role="menuitem">1</a></li>
<li><a href="#" role="menuitem">2</a></li>
<li><a href="#" role="menuitem">3</a></li>
<li><a href="#" role="menuitem">4</a></li>
</ul>
</div>
</div>
<!--引入js 先jquery 后bootstrap-->
<script src="../jquery.min.js"></script>
<script src="../bootstrap-3.4.1/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>
线条分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="dropdown">
<!--class="dropdown pull-right" 显示在右
-->
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<!--class="dropdown-menu dropdown-menu-right" 显示在右
--
-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="divider"></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="divider"></li>
<li><a href="#" role="menuitem">1</a></li>
<li><a href="#" role="menuitem">2</a></li>
<li><a href="#" role="menuitem">3</a></li>
<li><a href="#" role="menuitem">4</a></li>
</ul>
</div>
</div>
<!--引入js 先jquery 后bootstrap-->
<script src="../jquery.min.js"></script>
<script src="../bootstrap-3.4.1/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>
菜单禁用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="dropdown">
<!--class="dropdown pull-right" 显示在右
-->
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<!--class="dropdown-menu dropdown-menu-right" 显示在右
--
-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="divider"></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="divider"></li>
<li><a href="#" role="menuitem">1</a></li>
<li><a href="#" role="menuitem">2</a></li>
<li class="disabled"><a href="#" role="menuitem">3</a></li>
<li><a href="#" role="menuitem">4</a></li>
</ul>
</div>
</div>
<!--引入js 先jquery 后bootstrap-->
<script src="../jquery.min.js"></script>
<script src="../bootstrap-3.4.1/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>
