Bootstrap下拉插件dropdown使用技巧

這次帶給大家Bootstrap下拉外掛dropdown使用技巧，Bootstrap下拉外掛dropdown使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

下拉式選單.dropdown具體用法

.dropdown 觸發器button 下拉選單ul>

# .dropdown 包裹層

# .dropdown-toggle 下拉選單觸發器

data-toggle="dropdown  自訂屬性 可以與js關聯起來

# .dropdown-menu  下拉選單

具體實例：

<p>
 <button>
  Dropdown
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

如果你想讓選單預設是開啟狀態，需要加入一個.open的類別

<p>
 <button>
  Dropdown
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

.dropup   向上彈出式選單

透過為下拉式選單的父元素設定 .dropup 類，可以讓選單向上彈出（預設是向下彈出的）

<p>
 <button>
  Dropup
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

1.對齊方式：預設左對齊

# 右對準：為.dropdown-menu加上.dropdown-menu-right類別就可以

# 注意：它是以父級的位置來對齊的

怎麼樣讓下拉式選單以下拉選單觸發器的右端對齊呢？那就需要為下拉式選單觸發器button新增一個.btn block的類別

<p>
 <button>
  Dropup
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

2.下拉式選單的標題     dropdown-header

在任何下拉式選單中均可透過新增標題來標明一組動作。

如果想要讓下拉式選單的標題居中，就需要加入一個.text-center的類別

 ...  
• Dropdown header
 ...

3.分割線：     .pider 

為下拉式選單新增一條分割線，用於將多個連結分組。

 ...  
•  ...

4、停用選單：disabled

# 為下拉式選單中的

元素新增 .disabled 類，從而停用對應的選單項目。

 
• Regular link
 
• Disabled link
 
• Another link

注意：

aria-haspopup="true"  aria-expanded="true"  為需要藉助螢幕閱讀器的特殊人群設定的

id="dropdownMenu1" aria-labelledby="dropdownMenu1"   透過id將觸發器和下拉選單關聯起來                         

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Bootrap Vue實作仿百度搜尋介面功能

Node.js環境變數process.env使用詳解

node.js和ES6的exports、module.exports使用詳解

##

以上是Bootstrap下拉插件dropdown使用技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！