Bootstrap擁有自己獨立的下拉菜單，下面詳細介紹一下它的下拉菜單。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../js/bootstrap/css/bootstrap.min.css" target="_blank" rel="external nofollow" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" id="dropMenu1">
菜鳥學習
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropMenu1">
<li role="presentation" class="dropdown-header">前端學習</li>
<li role="presentation">
<a role="menuitem" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >html</a>
</li>
<li role="presentation">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >css</a>
</li>
<li role="presentation">
<a role="menuitem" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >js</a>
</li>
<li role="presentation" class="divider"></li>
<li class="dropdown-header">後端學習</li>
<li ><a role="menuitem" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >java</a></li>
<li ><a role="menuitem" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >c#</a></li>
</ul>
</div>
</body>
</html>
dropdown是下拉菜單的辨別樣式
.dropdown-toggle:focus {
outline: 0
}
data-toggle="dropdown"是用于切換下拉菜單的，是下拉菜單的觸發器，若沒有這個屬性，那麼下拉菜單将不能下拉。
<span class="caret"></span>這段話的意思是顯示下拉菜單的三角符号，沒有這句話這不顯示下拉三角符号，如圖：
ul包裹的部分是菜單内容，其中dropdown-menu樣式作用于菜單。
role的作用是描述一個非标準tag的實際作用，例如role=“menu”，說明這是一個菜單。
aria-*的作用就是描述這個tag在可視化的情境中的具體資訊。
例如：aria-labelledby="dropMenu1"，說明這個标簽是依賴于id為“dropMenu1”的元素。
dropdown-header：該樣式說明這是一個菜單頭，相當于菜單标題
divider：該樣式是一條橫線，可将菜單分割為2部分
pull-right：該樣式一般用于ul上，作用是讓菜單内容靠右顯示
、
偶爾你會看到tabindex屬性，該屬性的作用是讓tab切換鍵生效。
預設tabindex=0，當值越大，則越優先切換。
當tabindex=-1，說明該元素不能通過tab鍵選中。
當多個tabindex的值相同時，按html中的先後順序一次切換。
下拉菜單可以是一個按鈕，也可以不是，當下拉菜單為按鈕下拉菜單時，可以不用class="dropdown"。而使用class="btn-group"，btn-group表示一個按鈕組，即一個按鈕下拉菜單。
在btn-group下可實作按鈕的分割。隻需在定義button時定義2個button即可，一個用于展示内容，一個用于下拉。
<button type="button" class="btn btn-default">菜鳥學習</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropMenu1">
<span class="caret"></span>
<span class="sr-only">切換下拉菜單</span>
</button>
效果如：
上拉菜單隻需将class=“dropdown”修改為class=“dropup即可。
為了保證連結完成，可以用data-target="#"。
在js中可以使用$(".dropdown-toggle").dropdown;來切換下拉菜單。