首页 > 代码库 > bootstrap(4)关于下拉菜单的功能

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="http://www.mamicode.com/#">Action</a></li> <li><a href="http://www.mamicode.com/#">Another action</a></li> <li><a href="http://www.mamicode.com/#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="http://www.mamicode.com/#">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类,实现对于下拉菜单的禁用效果

    

 

bootstrap(4)关于下拉菜单的功能