下拉、上拉菜單 - bootStrap4常用CSS筆記
阿新 • • 發佈：2019-05-13
menu 對齊 需要 一個 oid void opd 屬性 query
| 菜單觸發樣式 | |
| .dropdown-toggle | 下拉基類，定義一個觸發下拉的元素。要和data-toggle="dropdown"屬性結合使用 |
| .dropdown-toggle-split | 菜單分割線，作用未知 |
| 菜單列表樣式 | |
| .dropdown-menu | 定義一個下拉菜單容器 |
| .dropdown-menu-right | 下拉菜單容器右對齊。默認是左對齊 |
| .dropdown-header | 下拉菜單標題 |
| .dropdown-item | 下拉菜單列表項目 |
| .dropdown-divider |
在下拉菜單中創建一個水平的分割線 |
| .active | 啟用指定下拉菜單列表項目 |
| .disabled | 禁用指定下拉菜單列表項目 |
下拉、上拉菜單需要引入jquery版本不低於3.2，且還要引入popper.min.js文件，兩個文件的CDN引用如下：
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
下拉菜單示例：
1 <div class="container"> 2 <div class="wrapper"> 3 <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">點我下拉</a> 4 <div class="dropdown-menu dropdown-menu-right"> 5 <div class="dropdown-header">產品大類</div> 6 <a href="#" class="dropdown-item">菜單一</a> 7 <a href="#" class="dropdown-item">菜單二</a> 8 <div class="dropdown-divider"></div> 9 <a href="#" class="dropdown-item">菜單三</a> 10 <a href="#" class="dropdown-item">菜單四</a> 11 </div> 12 </div> 13 </div>
按鈕下拉示例：
1 <div class="container"> 2 <div class="wrapper"> 3 點擊按鈕，下拉菜單：<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">點我</button> 4 <!-- 定義下拉菜單 --> 5 <div class="dropdown-menu"> 6 <a href="#" class="dropdown-item">a菜單一</a> 7 <a href="#" class="dropdown-item">b菜單二</a> 8 <div class="dropdown-divider"></div> 9 <a href="#" class="dropdown-item">c菜單三</a> 10 <a href="#" class="dropdown-item">d菜單四</a> 11 </div> 12 </div> 13 </div>
按鈕組下拉示例：
<div class="container"> <div class="btn-group"> <button class="btn btn-primary">請選擇</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <!-- 定義下拉菜單 --> <div class="dropdown-menu"> <a href="#" class="dropdown-item">a菜單一</a> <a href="#" class="dropdown-item">b菜單二</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">c菜單三</a> <a href="#" class="dropdown-item">d菜單四</a> </div> </div> </div>
上拉菜單用法和下拉相同，只要將下拉菜單包含在一個類名為: dropup 的容器內就可以實現上拉菜單功能。不過位於頁面頂部是無法向上拉取菜單，會自動變成下拉菜單。
| 上拉菜單樣式 | |
| .dropup | 包裹下拉菜單，自動變成上拉 |
上拉菜單示例：
<div class="dropup btn-group"> <button class="btn btn-primary">請選擇</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <!-- 定義下拉菜單 --> <div class="dropdown-menu"> <a href="#" class="dropdown-item">a菜單一</a> <a href="#" class="dropdown-item">b菜單二</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">c菜單三</a> <a href="#" class="dropdown-item">d菜單四</a> </div> </div>
下拉、上拉菜單 - bootStrap4常用CSS筆記