Bootstrap源碼解讀1 下拉菜單
這篇文章主要源碼解讀了Bootstrap下拉菜單，介紹了Bootstrap各式各樣的下拉菜單,具有一定的參考價值，感興趣的小夥伴們可以參考一下
基本用法
在使用Bootstrap框架的下拉菜單時，必須調用Bootstrap框架提供的bootstrap.js文件。因爲Bootstrap的組件交互效果都是依賴於jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js纔會生效果。
使用方法如下：
1. 使用一個名爲“dropdown”的容器包裹了整個下拉菜單元素：<div class="dropdown"></div>
2. 使用一個<button>按鈕做爲父菜單，並且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致：data-toggle=”dropdown”
3. 下拉菜單項使用一個ul列表，並且定義一個類名爲“dropdown-menu”：<ul
class="dropdown-menu">
完整如下：
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
實現原理
Bootstrap框架中的下拉菜單組件，其下拉菜單項默認是隱藏的，因爲“dropdown-menu”默認樣式設置了“display:none”。實現源碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; 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”又會被移除。實現源碼如下：
|
1 2 3 |
.open > .dropdown-menu { display: block; } |
下拉分隔線
下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那麼組與組之間可以通過添加一個空的<li>，並且給這個<li>添加類名“divider”來實現添加下拉分隔線的功能。
例如： <li role="presentation" class="divider"></li>
實現源碼如下：
|
1 2 3 4 5 6 |
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } |
菜單標題
組與組之間可以添加一個<li>，並添加類名“dropdown-header”可以給每個組添加一個頭部（標題）。
例如：<li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
實現源碼：
|
1 2 3 4 5 6 7 |
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #999; } |
對齊方式
下拉菜單默認是左對齊，如果你想讓下拉菜單相對於父容器右對齊時，可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名，
例如：<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
實現源碼：
|
1 2 3 4 5 6 7 8 |
.dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu-right { right: 0; left: auto; } |
不過這樣的話，下拉列表會跑到頁面的最右邊去，我們顯然不希望這樣，所以一定要爲.dropdown添加float:left的css樣式：
|
1 2 3 |
.dropdown{ float: left; } |
另外，還有個類名“dropdown-menu-left”，其實就是下拉菜單與父容器左邊對齊的默認效果，
實現源碼：
|
1 2 3 4 |
.dropdown-menu-left { right: auto; left: 0; } |
菜單項狀態
下拉菜單項的默認的狀態有懸浮狀態（:hover）和焦點狀態（:focus），實現源碼如下：
|
1 2 3 4 5 6 |
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; } |
另外還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只需要在對應的菜單項<li>上添加對應的類名“active”或“disabled”。
實現源碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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); } |
本文系列教程整理到：Bootstrap基礎教程 專題中，歡迎點擊學習。