Bootstrap实现下拉菜单效果

网络编程 2024/11/16 佚名

3 1 2

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

1、案例

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，然后添加组成菜单的HTML代码。

 <div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

可以通过上面的代码发现，里面可能有很多陌生的样式类或者属性。

一个Dropdown按钮和右侧有个小图标caret，当然这个小图标和按钮的文本是平级的。

首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表。

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。

下来第四个li标签中有个divider其实是一个分割线的样式类。

大概我理解的就这个样子，理解的肯定不到位。

2、对齐选项

给下拉菜单.dropdown-menu加上.text-right 使文字右对齐。

 <div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

只是在上面的代码中的ul标签上添加了一个text-right的样式类。

3、标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

 <h1>下拉菜单</h1>
 <div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation" class="dropdown-header">Dropdown header</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation" class="dropdown-header">Dropdown header</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

主要是添加了<li role="presentation" class="dropdown-header">Dropdown header</li> 里面有个.dropdown-header的样式类。

4、禁用的菜单项

给下拉菜单中的<li>加上.disabled禁用链接。

继续修改上面的代码将Something else here行的代码进行替换

复制代码代码如下:<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
主要是在li标签中添加.disabled的样式类。

你运行之后可以查看效果，其实效果和上面的标题样式差不多，当你点击的时候会有一个禁用的图标显示。

5、基本案例

1）、按钮式下拉菜单
把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单开关。

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
</div>

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮。

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <div class="dropdown">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
  </ul>
  </div>
 </div

只能点击小图标才能出现下来菜单额。

2）、尺寸

下拉菜单按钮适用所有尺寸的按钮。

<div class="btn-group">
 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
 Large button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
 Extra small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

通过样式类.btn-lg、 .btn-sm、.btn-xs来控制按钮的大小。

3）、向上弹出式菜单

给父元素添加.dropup就能使触发的下拉菜单在元素上方。

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
 <!-- Dropdown menu links -->
 </ul>
</div>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

本文主要介绍了下拉菜单的相关内容，然后介绍了按钮和下拉菜单的组合，变化还是蛮多的，样式也不错，希望大家喜欢。

Bootstrap,下拉菜单

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Bootstrap实现下拉菜单效果”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

Bootstrap实现下拉菜单效果

一系列Bootstrap导航条使用方法分享

Easyui Treegrid改变默认图标的方法

评论“Bootstrap实现下拉菜单效果”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Bootstrap实现下拉菜单效果

一系列Bootstrap导航条使用方法分享

Easyui Treegrid改变默认图标的方法

评论“Bootstrap实现下拉菜单效果”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存