Bootstrap 下拉菜单和按钮

一、下拉菜单：

用于显示链接列表的可切换、有上下文的菜单

     .dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 或者 .dropup 里。

     .dropdown-menu 类用于实际下拉菜单的创建。

     .dropdown-header 类用于在下拉菜单中添加标题

     .divider 下拉菜单中的分割线

     .disabled 下拉菜单中的禁用项

        

            
                下拉菜单
                
            
            

                
标题1
                
菜单1
                
菜单2
                

                
标题2
                
菜单3
                
菜单4
            
        

 三角符号：

      

二、按钮组

       允许把一组按钮放在同一行里

       .btn-group  该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

       .btn-group-vertical  该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

       调整整个按钮组的大小：.btn-group-lg, .btn-group-sm, .btn-group-xs

       调整单个按钮的大小：.btn-sm, .btn-lg, .btn-xs

       单个按钮宽度100%占满父容器：.btn-block

        

            Left
            Middle
            Right
        

        

            Left
            Middle
            Right
        

      

三、下拉菜单与按钮使用

      1）单按钮下拉菜单：见下拉菜单

      2）分裂式按钮下拉菜单

     

        

            按钮1
            
                
            
            

                
标题1
                
菜单1
                
菜单2
                

                
标题2
                
菜单3
                
菜单4
            
        

三、下拉菜单（Dropdown）插件

     下拉菜单，没有涉及到交互部分，使用下拉菜单（Dropdown）插件，可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

     注意：data-toggle="dropdown" 必须要有

     通过 JavaScript 调用下拉菜单切换 ：

$('.dropdown-toggle').dropdown()

  小需求：在一的基础上添加鼠标放上去与离开时切换显示或隐藏下拉菜单 

        

            
                下拉菜单
                
            
            

                
标题1
                
菜单1
                
菜单2
                

                
标题2
                
菜单3
                
菜单4
            
        

$(function () {
    $("#ddbtn").mouseenter(function () {
        $(this).dropdown("toggle");
    }).mouseleave(function () {
        $(this).dropdown("toggle");
    });
    $("#ddmenu").mouseenter(function () {
        $("#ddbtn").dropdown("toggle");
    }).mouseleave(function () {
        $("#ddbtn").dropdown("toggle");
    });
});

自己写一遍，加深存在感，详情参考官方文档：https://v3.bootcss.com/components/#dropdowns