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

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

一、下拉菜单

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

实例

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

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropdown    <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>

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

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

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

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

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

二、按钮式下拉菜单

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

单按钮下拉菜单

<!-- Single button --><div class="btn-group">  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Action <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <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>

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

分裂式下拉菜单

只是多一个分开的按钮。

<!-- Split button --><div class="btn-group">  <button type="button" class="btn btn-danger">Action</button>  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    <span class="caret"></span>    <span class="sr-only">Toggle Dropdown</span>  </button>  <ul class="dropdown-menu">    <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>

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

三、面板

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

基本实例

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

<div class="panel panel-default">  <div class="panel-body">    Basic panel example  </div></div>

带标题的面板

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h2>-<h7> 标签，添加一个预定义样式的标题。不过，<h2>-<h7> 标签的字体大小将被 .panel-heading 的样式所覆盖。

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

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