詳解Bootstrap下拉式功能表組件，bootstrap下拉式功能表

詳解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、使用了<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); }