<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link href="https://www.jb51.net/css/bootstrap.css" /> </head> <!--第1步:添加一个dropdown父级; 第2步:给button添加一个data-toggle="dropdown"属性; 第3步:给ul添加一个class="dropdown-menu”. 最好再给button添加一个dropdown-toggle的class属性 --> <body> <div> <div> <div> <button data-toggle="dropdown">学院课程 <span></span></button><!--btn-default默认颜色--> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">less</a></li> <li><a href="#">bootstrap</a></li> </ul> </div> </div> </div> <script src="https://www.jb51.net/js/jquery-2.1.0.js"></script> <script src="https://www.jb51.net/js/bootstrap.js"></script> </body> </html>
效果图：
Bootstrap下拉菜单的样式：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link href="https://www.jb51.net/css/bootstrap.css" /> </head> <body> <div> <div> <div> <div> <!--在dropdown后面加上open使下拉列表默认展开;而pull-right使其右浮动并右对齐，改为dropup使箭头朝上并向上展开--> <button data-toggle="dropdown">学院课程 <span></span></button><!--btn-block使按钮撑满整个父级--> <ul> <li><a href="#" >html</a></li> <li><a href="#" >css</a></li> <li><a href="#" >javascript</a></li> <li><a href="#" >less</a></li> <li><a href="#" >bootstrap</a></li> </ul> </div> </div> <div> <div> <button data-toggle="dropdown">学院课程 <span></span></button> <ul> <li><a href="#" >前端</a></li><!--dropdown-header是菜单里的标题，给li添加--> <li><a href="#" >html</a></li> <li><a href="#" >css</a></li> <li><a href="#" >javascript</a></li> <li><a href="#" >less</a></li> <li><a href="#" >bootstrap</a></li> <li><a href="#" >html</a></li><!--divider是分隔线，给li添加--> <li><a href="#" >后端</a></li><!--text-center让内容居中--> <li><a href="#" >php</a></li> <li><a href="#" >java</a></li> <li><a href="#" >.net</a></li><!--disabled使菜单不可选--> </ul> </div> </div> </div> </div> <script src="https://www.jb51.net/js/jquery-2.1.0.js"></script> <script src="https://www.jb51.net/js/bootstrap.js"></script> </body> </html>
效果图：
