深入淺析Bootstrap中的下拉式選單組件

相關推薦：《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、使用了按鈕作為父選單，並且定義類別名稱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為父級容器p.dropdown新增或一處open來控制下拉式選單顯示或隱藏，也就是說，預設情況，p.dropdown沒有類別名稱open，當使用者第一次點擊時，p.dropdown會新增類別名稱open，當使用者再點擊時，p.dropdown容器中的類別名稱會被移除

.open > .dropdown-menu {
display: block; 
}

下拉分隔線

假設下拉式選單有兩個群組，那麼群組與群組之間可以透過新增一個空的

,並且給這個li添加類別名稱.piderl來實現添加下拉分隔線的功能

.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-深入淺析Bootstrap中的下拉式選單組件: none;

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

更多程式相關知識，請造訪：

程式設計影片

！ ！

以上是深入淺析Bootstrap中的下拉式選單組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！