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給父級容器p.dropdown添加或一處open來控制下拉菜單顯示或隱藏，也就是說，默認情況，p.dropdown沒有類名open，當用戶第一次點擊時，p.dropdown會添加類名open，當用戶再次點擊時，p.dropdown容器中的類名會被移除

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

下拉分隔線

假設下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>,并且給這個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-image: none;

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Bootstrap中下拉菜單組件的使用示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!