2. 程式人生 > >深入理解BootStrap Item8 -- 下拉選單

深入理解BootStrap Item8 -- 下拉選單

阿新 • • 發佈：2019-02-06

1、下拉選單（基本用法）

小夥伴們注意，在Bootstrap框架中的下拉選單元件是一個獨立的元件，根據不同的版本，它對應的檔案：

☑ LESS版本：對應的原始碼檔案為 dropdowns.less

☑ Sass版本：對應的原始碼檔案為 _dropdowns.sass

☑ 編譯後的Bootstrap版本：檢視bootstrap.css檔案第3004行～第3130行

在使用Bootstrap框架的下拉選單時，必須呼叫Bootstrap框架提供的bootstrap.js檔案。當然，如果你使用的是未編譯版本，在js資料夾下你能找到一個名為“dropdown.js”的檔案。你也可以呼叫這個js檔案。不過在我們的教程中，我們統一呼叫壓縮好的“bootstrap.min.js”

檔案：

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

特別宣告：因為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>

使用方法：

在使用Bootstrap框架中的下拉選單元件時，其結構運用的正確與否非常的重要，如果結構和類名未使用正確，直接影響元件是否能正常運用。我們來簡單的看看：

1、使用一個名為“dropdown”的容器包裹了整個下拉選單元素，示例中為:

2、使用了一個<button>按鈕做為父選單，並且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為:

data-toggle="dropdown"

3、下拉選單項使用一個ul列表，並且定義一個類名為“dropdown-menu”，此示例為:

<ul class="dropdown-menu">

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉選單</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>

<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"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
  </ul>
</div> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

這裡寫圖片描述

2、下拉選單（原理分析）

Bootstrap框架中的下拉選單元件，其下拉選單項預設是隱藏的，如下所示：

這裡寫圖片描述

因為“dropdown-menu”預設樣式設定了“display:none”，其詳細原始碼請檢視bootstrap.css檔案第3010行～第3029行：

.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”又會被移除。我們可以通過瀏覽器的firebug檢視整個過程：

預設情況：

這裡寫圖片描述

使用者第一次點選：

這裡寫圖片描述

使用者再次點選：

這裡寫圖片描述

在bootstrap.css檔案第3076行～第3078行，我們可以很容易發現：

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

3、下拉選單（下拉分隔線）

在Bootstrap框架中的下拉選單還提供了下拉分隔線，假設下拉選單有兩個組，那麼組與組之間可以通過新增一個空的<li>，並且給這個<li>新增類名“divider”來實現新增下拉分隔線的功能。對應的樣式程式碼：

/原始碼bootstrap.css檔案第3034行～第3039行/

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉分隔線</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
 <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"><a role="menuitem" tabindex="-1" href="#">蘿蔔</a></li>
    <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>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">饅頭</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">麵條</a></li>
  </ul>
</div> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

效果如下：

這裡寫圖片描述

4、下拉選單（選單標題）

上一小節講解通過新增“divider”可以將下拉選單分組，為了讓這個分組更明顯，還可以給每個組新增一個頭部（標題）。如下：

<li role="presentation" class="dropdown-header">第一部分選單頭部</li>

對應的樣式如下：

/檢視bootstrap.css檔案第3090行～第3096行/

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

示例

<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"><a role="menuitem" tabindex="-1" href="#">蘿蔔</a></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>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">饅頭</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">麵條</a></li>
  </ul>
</div>

執行效果如下：
這裡寫圖片描述

5、下拉選單（對齊方式）

實現右對齊方法：

Bootstrap框架中下拉選單預設是左對齊，如果你想讓下拉選單相對於父容器右對齊時，可以在“dropdown-menu”上新增一個“pull-right”或者“dropdown-menu-right”類名，如下所示：

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">

上面程式碼中的“pull-right”類可以用“dropdown-menu-right”代替，兩個類的作用是一樣的，可從下面的原始碼中看出。

實現原理：

對應的樣式如下：

/原始碼請檢視bootstrap.css檔案第3030行～第3033行和3082行～第3085行/

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}

同時一定要為.dropdown新增float:leftcss樣式。

.dropdown{
  float: left;
}

執行效果如下所示：
這裡寫圖片描述

下拉選單與父容器左邊對齊:

與此同時，還有一個類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”，其效果就是讓下拉選單與父容器左邊對齊，其實就是預設效果。

/請檢視bootstrap.css檔案第3086行～第3089行/

.dropdown-menu-left {
  right: auto;
  left: 0;
}

6、下拉選單（選單項狀態）

下拉選單項的預設的狀態（不用設定）有懸浮狀態（:hover）和焦點狀態（:focus）：

/檢視bootstrap.css檔案第3049行～第3054行/

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

下拉選單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只需要在對應的選單項上新增對應的類名：

<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>

執行效果如下：

這裡寫圖片描述

對應的樣式程式碼也非常簡單：

/請檢視bootstrap.css檔案第3055行～第3075行/

.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 Item8 -- 下拉選單

1、下拉選單（基本用法） 小夥伴們注意，在Bootstrap框架中的下拉選單元件是一個獨立的元件，根據不同的版本，它對應的檔案： ☑ LESS版本：對應的原始碼檔案為 dropdowns.less ☑ Sass版本：對應的原始碼檔案為 _dropdow

bootstrap按鈕下拉選單（12）

如需向按鈕新增下拉選單，只需要簡單地在在一個 .btn-group 中放置按鈕和下拉選單即可。 您也可以使用 <span class="caret"></span> 來指示按鈕作為下拉選單。 <div class="btn-group"> &l

使用bootstrap 的下拉選單實現select的下拉複選框多選

CSS程式碼:/*多選下拉框樣式（根據自己的樣式調整）*/ .dropdown_item{width: 100%} .dropdown_item>li:HOVER{background-color

bootstrap實現下拉選單需要的連結引入

我理解的bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自己定義樣式，可以直接引用定義好的樣式。      我理解bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自

用bootstrap做下拉選單，並使用jQuery實現從伺服器載入下拉選單的item。

用bootstrap做下拉選單，並使用jQuery實現從伺服器非同步載入下拉選單的item。 前臺程式碼： <div class="form-group">

【Bootstrap】下拉選單Dropdown

下拉選單Dropdown不是表單中<select><option value=''></option></select>那種啊，而是導航條中常見的那種。 Bootstrap官方網站對下拉選單Dropdown的解釋很少，即使是他

bootstrap 二級下拉選單

<!DOCTYPE html> <html> <head> <title>Bootstrap 例項 - 基本的按鈕下拉選單</title> <link href="http://libs.baid

bootstrap多級下拉選單

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級下拉選單示例</

Bootstrap 元件-下拉選單

下拉選單 選單div<div class="dropdown">下拉按鈕，id用來給下拉選單指向用的<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-togg

Bootstrap元件---下拉選單，多級選單 ,按鈕

下拉選單       選單： ,dropdown（.dropup改變這個是上顯示）   data-toggle="dropdown" (啟用文字處)      .dropdown-menu   .pull-left   .pull-right        按鈕組：.btn

bootstrap怎麼設定下拉選單不點選，改成滑鼠懸停直接顯示下拉選單

方法一： 實際上比較簡單，只需要加一個css設定下hover的狀態，把下拉選單設定成block，具體css：.nav > li:hover .dropdown-menu {display: block;}  但是主導航失去連結的效

修改bootstrap下拉選單的寬度

<!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" a

Bootstrap -- 下拉選單、輸入框組、導航選單

Bootstrap -- 下拉選單、輸入框組、導航選單 1. 下拉選單 可以使用帶有各種大小按鈕的下拉選單：.btn-lg、.btn-sm 或 .btn-xs。 實現下拉選單： <!DOCTYPE html> <html> <head> <

bootstrap頁面頭部使用者影象下拉選單

1.介面展示 2.HTML程式碼 <div class="logo"> <div class="container-fluid"> <div class="row"> <div

BootStrap之包涵下拉選單的輸入框

用法： <div class="row col-md-5 text-center"> <div class="input-group"><!--保持內聯，消除邊框，類

bootstrap 下拉選單（10）

<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題 &l

玩轉Bootstrap（基礎） -- （5.下拉選單）

1.在使用Bootstrap框架的下拉選單時，必須呼叫Bootstrap框架提供的bootstrap.js檔案。當然，如果你使用的是未編譯版本，在js資料夾下你能找到一個名為“dropdown.js”的檔案。你也可以呼叫這個js檔案。不過在我們的教程中，我們統一

bootstrap(下拉選單與滾動監聽)

下拉選單（Dropdown） ☑ LESS版本：對應的原始檔dropdowns.less <h3>示例1</h3> <div class="navbar navbar-default" id="navmenu"&g

【解決方法】點選bootstrap上的下拉選單無反應

遇到問題是：點選bootstrap裡的下拉選單沒有反應 正常情況是點選時應該是由以下 變為 這樣下拉選單會正常出來 參照網上解決方法是：匯入的.js順序錯誤 1.匯入bootstrap的.css檔案 2.匯入jquery的.js檔案 3.匯入bootstrap

bootstrap js外掛篇——下拉選單、滾動監測、選項卡

三、下拉選單 3.1基本結構 3.2 觸發方式  注：1、測試時發現js觸發的下拉選單點時只出現無法消失，建議data-toggle觸發         2、如果觸發下拉選單的元素是一個連結元素