bootstrap(4)關於下拉菜單的功能

一：下拉菜單：

下拉菜單的代碼實現：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
   
   //通過添加一個class為 caret 的span 添加下三角號
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>　　

　

將整個下拉菜單包括點擊下拉按鈕包裹在一個class為dropdown的容器內

對於button采用使用button的方法來求，注意功能為下拉的按鈕的時候，添加class為 dropdown-toggle類

彈出菜單的提示項使用是 <ul>來包裹的

將ul設為 class="drop-menu"

效果如下：

（1）對於最外層div的類名改變實現的樣式實現下拉菜單

對於上彈菜單而言：

我們僅僅需要將class="dropdown"變為 class="dropup"就好了！

 

（2）通過對於ul元素添加 drop-menu-right  或者 drop-menu-left來實現菜單的左右對齊

（3）通過對於li元素進行操作實現的功能：

   1》》將 li元素內的某一項添加 class為 dropdown-header來實現下拉菜單中的標題

        <li   class="dropdown-header"></li>

   2》》為下拉菜單添加一條分割線，在菜單組中實現菜單選項分割效果

        <li  role="separator "   class="divider">

  3》》為li元素添加.disabled類，實現對於下拉菜單的禁用效果