1、Bootstrap下拉菜單的使用,源代碼如下：（如有不當之處，還望大佬們指出哈……）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Bootstrap下拉菜單</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
7 <script src="js/jquery-3.2.1.min.js"></script>
8 <script src="js/bootstrap.min.js"></script>
9 </head>
10 <body>
11 <div class="container">
12 <div class="dropdown">
13 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
14 <span class="glyphicon glyphicon-user"></span> 用戶<!--glyphicon glyphicon-user是圖標的css樣式-->
15 <span class="caret"></span>
16 </button>
17 <ul class="dropdown-menu">
18 <li class="dropdown-header">這一項是標題</li>
19 <li><a href="#">普通菜單</a></li>
20 <li class="active"><a href="#">菜單激活狀態</a></li>
21 <li class="disabled"><a href="#">禁用菜單</a></li>
22 <li class="divider"><a href="#">分隔線</a></li>
23 <li><a href="#">普通菜單</a></li>
24 </ul>
25 </div>
26 </div>
27 </body>
28 </html>
Effect Picture:
源碼文件下載：Bootstrap下拉菜單.zip
2、以下內容列出的是各個類選擇器設定的內容以及在標簽起到的作用。
(1) Bootstrap中的下拉菜單需要用到jQuery.js和bootstrap.js，所以這兩個文件都要引用進去。注意引用的先后順序，需要先引用jQuery，再應用bootstrap.js。
如果先引用bootstrap.js后引用jQuery.js，就會出錯，Console會輸出錯誤提示信息：
(2) class="dropdown"&class="dropup" <div></div>起到定位的效果
.dropup,.dropdown {
position: relative;
}
(3) class="btn"、class="btn-denger" <button></button>設置按鈕樣式，按鈕顏色為紅色
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
(4) class="caret" <span></span>設置（下拉小圖標）圖標
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid \9;
}
(5) class="dropdown-menu" <ul></ul>可以隱藏ul，一開始是隱藏狀態
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
(6) class="dropdown-menu-right"
class="dropdown-menu-left" <ul></ul>設置ul相對<div class="dropdown"></div>的位置
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
(7) class="dropdown-header" <li></li>（不用超鏈接）在下拉菜單中不能選中，代表標題
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap; }
(8) data-toggle="dropdown"屬性 <button><button>在按鈕上這個屬性可實現下拉顯示子菜單
(9) class="disabled " <li></li>使放在<a></a>上顯示禁用圖標
.nav > li.disabled > a {
color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
(10) class="active" <li></li>使放在<a></a>上顯示激活狀態
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
(11) classs="divider " <li></li>使放在<a></a>上顯示分隔線
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
下拉菜單要注意的：{基本語法、對齊、標題、分隔線、禁用菜單}
文章系作者原創，轉載請注明出處，感謝合作!