詳解Bootstrap下拉菜單組件

bootstrap框架中的下拉菜單組件是一個獨立的組件，根據不同的版本，他對應的文件：

less 對應的源碼文件為：dropdowns.less

sass對應的源碼文件為：_dropdowns.scss

在使用bootstrap礦建的下拉菜單時，必須調用bootstrap框架提供的bootstrap.js文件。對於未編譯版本，可以在js下找到一個名為dropdown.js的文件，也可以調用這個文件。也可以調用壓縮好的文件bootstrap.min.js

由於bootstrap組件交互效果都是依賴於jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jQuery.min.js

官網上的示例：

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜單 

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

 … 

<li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>

詳解：

1、使用一個名為dropdown的容器包裹了整個下拉菜單元素

<div class="dropdown"></div>

2、使用了<button>按鈕作為父菜單，並且定義類名dropdown-toggle和自定義data-toggle屬性，且值必須和最外容器類名一致

data-toggle=“dropdown”

3、下拉菜單項使用了一個ul列表，並且定義一個類名為dropdown-menu

<ul class="dropdown-menu"></ul>

bootstrap中的下拉菜單項默認是隱藏的,dropdown-menu設置了display：none

.dropdown-menu {

 position

: absolute;/*設置絕對定位，相對於父元素div.dropdown*/

 top

: 100%;/*讓下拉菜單項在父菜單項底部，如果父元素不設置相對定位，該元素相對於body元素*/

 left

: 0;

 z-index

: 1000;/*讓下拉菜單項不被其他元素遮蓋住*/

 display

: none;/*默認隱藏下拉菜單項*/

 float

: left;

 min-width

: 160px;

 padding

: 5px 0;

 margin

: 2px 0 0;

 font-size

: 14px;

 list-style

: none;

 background-color

: #fff;

 background-clip

: padding-box;

 border

: 1px solid #ccc;

 border

: 1px solid rgba(0, 0, 0, .15);

 border-radius

: 4px;

 -webkit-box-shadow

: 0 6px 12px rgba(0, 0, 0, .175);

 box-shadow

: 0 6px 12px rgba(0, 0, 0, .175); }

當用戶點擊父級菜單時，下拉菜單會顯示出來，再次點擊時下拉菜單將繼續隱藏

詳解：

通過js給父級容器div.dropdown添加或一處open來控制下拉菜單顯示或隱藏，也就是說，默認情況，div.dropdown沒有類名open，當用戶第一次點擊時，div.dropdown會添加類名open，當用戶再次點擊時，div.dropdown容器中的類名會被移除

.open > .dropdown-menu {

 display

: block; }

下拉分隔線

假設下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>,並且給這個li添加類名.dividerl來實現添加下拉分隔線的功能

.dropdown-menu .divider {

 height

: 1px;

 margin

: 9px 0;

 overflow

: hidden;

 background-color

: #e5e5e5; }

 

 

 

 

 

 

 

 

 

菜單標題

為了讓這個分組更明顯，還可以給每個組添加一個頭部標題。

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜單 

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜單頭部</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

… 

<li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜單頭部</li>

… 

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>

css樣式：

.dropdown-header {

 display

: block;

 padding

: 3px 20px;

 font-size

: 12px;

 line-height

: 1.42857143;

 color

: #999; }

 

bootstrap框架中下拉菜單默認是左對齊，如果要下拉菜單相對於父級容器右對齊，可以在dropdown-menu上添加一個類.dropdown-menu-right，注意，從v3.1.0版本開始，不再建議對下拉菜單使用.pull-right類

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

 下拉菜單 

<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">

 … 

</ul> </div>

.dropdown-menu-right {

 right

: 0;

 left

: auto; }

.dropdown

{

 float

: left; }

 

菜單項狀態

下拉菜單的默認狀態有懸浮狀態：hover和焦點狀態：focus

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

 color

: #262626;

 text-decoration

: none;

 background-color

: #f5f5f5; }

下拉菜單還有當前狀態和禁用狀態，這兩種狀態使用方法只需要在對應的菜單項上添加對應的類名

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

 下拉菜單 

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

 …. 

<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>

CSS:

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {

 color

: #fff;

 text-decoration

: none;

 background-color

: #428bca;

 outline

: 0; }

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus 

{

 color

: #999; }

.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus 

{

 text-decoration

: none;

 cursor

: not-allowed;

 background-color

: transparent;

 background-image

: none;

 filter

: progid:DXImageTransform.Microsoft.gradient(enabled = false); }