<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<link rel="stylesheet" type="text/css"
href="bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!--
下拉菜单
1.类名：.dropdown或.btn-group的div包裹整个下拉框
<div class="dropdown"></div>
2.默认向下dropdown，向上弹起加入.dropup即可
3.使用button作为父菜单，使用类名：.dropdown-toggle和
自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"></button>
4.在button中使用font制作下拉箭头
<span class="caret"></span>
5.下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu"
6.分组分割线：<li>添加类名"divider"来实现添加下拉分隔线的功能
7.分组标题：<li>添加类名"dropdown-header"来实现分组功能
8.对齐方式：
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
9.激活状态：.active和禁用状态.disabled
-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
电影类型
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">-- 动作 --</li>
<li><a href="#">速度与激情9</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 喜剧 --</li>
<li><a href="#">这个杀手不太冷静</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 科幻 --</li>
<li><a href="#">月球陨落</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 战争 --</li>
<li><a href="#">长津湖之水门桥</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 恐怖 --</li>
<li><a href="#">生化危机</a></li>
</ul>
</div>
</body>
</html>