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

阿新 • • 發佈：2019-01-03

1.在使用Bootstrap框架的下拉選單時，必須呼叫Bootstrap框架提供的bootstrap.js檔案。當然，如果你使用的是未編譯版本，在js資料夾下你能找到一個名為“dropdown.js”的檔案。你也可以呼叫這個js檔案。不過在我們的教程中，我們統一呼叫壓縮好的“bootstrap.min.js”檔案。
特別宣告：因為Bootstrap的元件互動效果都是依賴於jQuery庫寫的外掛，所以在使用bootstrap.min.js之前一定要先載入jquery.min.js才會生效果。

<!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"><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.下拉選單的原理分析
現在我們來分析一下實現原理，非常簡單，通過js技術手段，給父容器“div.dropdown”新增或移除類名“open”來控制下拉選單顯示或隱藏。也就是說，預設情況，“div.dropdown”沒有類名“open”，當用戶第一次點選時，“div.dropdown”會新增類名“open”；當用戶再次點選時，“div.dropdown”容器中的類名“open”又會被移除。

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

 <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> <!--加上class為divider的類名就能實現下拉分隔符的功能-->
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉選單項</a></li>
  </ul>
</div>

3.下拉選單（選單標題）

<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><!--加上dropdown-header的類名就好了-->
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉選單項</a></li>
  </ul>
</div>

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

5.下拉選單（選單項狀態）
下拉選單項的預設的狀態（不用設定）有懸浮狀態（:hover）和焦點狀態（:focus）。
下拉選單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只需要在對應的選單項上新增對應的類名。
這裡寫圖片描述

6.按鈕（按鈕組）
按鈕組和下拉選單元件一樣，需要依賴於button.js外掛才能正常執行。不過我們同樣可以直接只調用bootstrap.js檔案。因為這個檔案已集成了button.js外掛功能。
對於結構方面，非常的簡單。使用一個名為“btn-group”的容器，把多個按鈕放到這個容器中

<div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

這裡寫程式碼片

7.按鈕（按鈕工具欄）
那麼Bootstrap框架按鈕工具欄也提供了這樣的製作方法，你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中，如下所示：

這裡寫圖片描述

8.按鈕（巢狀分組）
很多時候，我們常把下拉選單和普通的按鈕組排列在一起，實現類似於導航選單的效果。如下所示：
這裡寫圖片描述
使用的時候，只需要把當初製作下拉選單的“dropdown”的容器換成“btn-group”，並且和普通的按鈕放在同一級.

<div class="btn-group">
  <button class="btn btn-default" type="button">首頁</button>
  <button class="btn btn-default" type="button">聯絡我們</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關於我們<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">公司簡介</a></li>
        <li><a href="##">客服服務</a></li>
    </ul>
  </div>
</div>

9.按鈕（垂直分組）
前面看到的示例，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。如下所示：
這裡寫圖片描述

10.按鈕（等分按鈕）
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組裡面的每個按鈕平分整個容器寬度。例如，如果你按鈕組裡面有五個按鈕，那麼每個按鈕是20%的寬度，如果有四個按鈕，那麼每個按鈕是25%寬度，以此類推。
等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名，如下所示：

<body>
<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
    <a class="btn btn-default" href="#">首頁</a>
    <a class="btn btn-default" href="#">聯絡我們</a>
  </div>
</div>

這裡寫圖片描述

11.按鈕下拉選單
按鈕下拉選單僅從外觀上看和上一節介紹的下拉選單效果基本上是一樣的。不同的是在普通的下拉選單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點選一個按鈕，會顯示隱藏的下拉選單。
按鈕下拉選單其實就是普通的下拉選單，只不過把“<a>”標籤元素換成了“<button>”標籤元素。唯一不同的是外部容器“div.dropdown”換成了“div.btn-group”。如下所示：
這裡寫圖片描述

12.按鈕的向下向上三角形
有的時候我們的下拉選單會向上彈起（接下來一個小節會介紹），這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉選單要用的類名）。
上面程式碼中可以看出，向上三角與向下三角的區別：其實就是改變了一個border-bottom的值。

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉選單<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">按鈕下拉選單項</a></li>
        <li><a href="##">按鈕下拉選單項</a></li>
    </ul>
</div>

這裡寫圖片描述

13.導航（基礎樣式）
導航對於一位前端人員來說並不陌生。可以說導航是一個網站重要的元素元件之一.
導航基礎樣式
Bootstrap框架中製作導航條主要通過“.nav”樣式。預設的“.nav”樣式不提供預設的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。比如右側程式碼編輯器中就有一個tab導航條的例子，他的實現方法就是為ul標籤加入.nav和nav-tabs兩個類樣式。

<!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>
<ul class="nav nav-tabs">
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
    <li><a href="##">Responsive</a></li>
</ul>
<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>

14.導航（標籤形tab導航）
標籤形導航，也稱為選項卡導航。特別是在很多內容分塊顯示的時，使用這種選項卡來分組十分適合。
標籤形導航是通過“nav-tabs”樣式來實現。在製作標籤形導航時需要在原導航“nav”上追加此類名，如：

<ul class="nav nav-tabs">
     <li><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li> <!--禁用這個按鈕-->
</ul>

實現原理非常的簡單，將選單項（li）按塊顯示，並且讓他們在同一水平上排列，然後定義非高亮選單的樣式和滑鼠懸浮效果。

15 . 導航（膠囊形(pills)導航）
膠囊形（pills）導航聽起來有點彆扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和“nav-tabs”類似，同樣的結構，只需要把類名“nav-tabs”換成“nav-pills”即可。

<ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
</ul>

這裡寫圖片描述

垂直
製作垂直堆疊導航只需要在“nav-pills”的基礎上新增一個“nav-stacked”類名即可。

自適應
只不過在製作自適應導航時更換了另一個類名“nav-justified”。當然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：

<ul class="nav nav-tabs nav-justified">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

自適應導航（實現原理）：
實現原理並不難，列表（

)設定了“display:table-cell”，讓列表項以模擬表格單元格的形式顯示：

16.導航加下拉選單（二級導航）
前面介紹的都是使用Bootstrap框架製作一級導航，但很多時候，在Web頁面中是離不開二級導航的效果。那麼在Bootstrap框架中製作二級導航就更容易了。只需要將li當作父容器，使用類名“dropdown”，同時在li中巢狀另一個列表ul，使用前面介紹下拉選單的方法就可以：

<body>
<ul class="nav nav-pills">
  <li class="active"><a href="##">首頁</a></li>
  <li class="dropdown">
      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
      <ul class="dropdown-menu">
          <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>
 <li><a href="##">關於我們</a></li>
</ul>
<br />

這裡寫程式碼片

17.麵包屑式導航
麵包屑(Breadcrumb)一般用於導航，主要是起的作用是告訴使用者現在所處頁面的位置（當前位置）。在Bootstrap框架中麵包屑也是一個獨立模組元件：
作者是使用li+li:before實現li與li之間的分隔符，所以這種方案在IE低版本就慘了（不支援）。

<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">我的書</a></li>
  <li class="active">《圖解CSS3》</li>
</ol>

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

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

Boostrap入門+樣式學習--貳--（慕課網大漠《玩轉bootstrap》[基礎]）

頭部視覺視差（仿QQ控制元件下拉效果）

tp3導航（帶下拉選單）如何實現？

使用AutoCompleteExtender（自動完成下拉選單）例項

彈出式選單（下拉選單）實現——PopupMenu

CSS Note 2.5 下拉選單

玩轉Linux之必修內功（基礎篇）

玩轉四旋翼無人機（GPS基礎）

第二十七篇玩轉數據結構——集合（Set）與映射（Map）

玩轉二叉連結串列（20 分）

六天帶你玩轉mysql資料庫--第一天（下）

十分鐘玩轉 jQuery、例項大全（轉發）

001—玩轉Mysql的配置檔案（my.ini）

玩轉SpringCloud 三．斷路器（Hystrix）RestTemplate+Ribbon和Feign兩種方式

六天帶你玩轉mysql資料庫--第二天（上）

學習：從零玩轉HTML5前端+跨平臺開發（假連結(掌握)）

怎樣玩轉千萬級別的資料（表分割槽）

HAWQ + MADlib 玩轉資料探勘之（七）——關聯規則方法之Apriori演算法

學習：從零玩轉HTML5前端+跨平臺開發（表單標籤-非input標籤(掌握)）

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

相關推薦