Bootstrap怎么实现按钮式下拉菜单

这篇文章主要介绍"Bootstrap怎么实现按钮式下拉菜单"，在日常操作中，相信很多人在Bootstrap怎么实现按钮式下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Bootstrap怎么实现按钮式下拉菜单"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

1、实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

      Dropdown        
    
Action
    
Another action
    
Something else here
    
    
Separated link
  

　　aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。

　　aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

　　aria-labelledby：当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：

　　当ul获取到焦点时，屏幕阅读器是会读："选择您的职位"

　　data-toggle: 表示什么事件类型发生

二、按钮式下拉菜单

　　把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

1、单按钮下拉菜单

      Action     
    
Action
    
Another action
    
Something else here
    
    
Separated link
  

　　鼠标指向时，显示背景颜色。

2、分裂式下拉菜单

只是多一个分开的按钮。

  Action          Toggle Dropdown    
    
Action
    
Another action
    
Something else here
    
    
Separated link
  

　　可以看到分成了左右两个按钮。

三、面板

某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。

1、基本实例

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

  
    Basic panel example  

2、带标题的面板

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的

- 标签，添加一个预定义样式的标题。不过，

- 标签的字体大小将被 .panel-heading 的样式所覆盖。

为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

到此，关于"Bootstrap怎么实现按钮式下拉菜单"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！