Bootstrap实现下拉菜单效果


Posted in Javascript onApril 29, 2016

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

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其实是一个分割线的样式类。

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

Bootstrap实现下拉菜单效果

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的样式类。

Bootstrap实现下拉菜单效果

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的样式类。

Bootstrap实现下拉菜单效果

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、基本案例

Bootstrap实现下拉菜单效果

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>

Bootstrap实现下拉菜单效果

分裂式按钮下拉菜单

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

<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

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

Bootstrap实现下拉菜单效果

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>

Bootstrap实现下拉菜单效果

通过样式类.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>

Bootstrap实现下拉菜单效果

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

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

Javascript 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
Easyui Treegrid改变默认图标的方法
Apr 29 #Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 #Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
Treegrid的动态加载实例代码
Apr 29 #Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
laravel5.6实现数值转换
2019/10/23 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Angular2自定义分页组件
2017/04/19 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python中apply函数的用法实例教程
2014/07/31 Python
Python中正则表达式的详细教程
2015/04/30 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
彻底解决Python包下载慢问题
2020/11/15 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
爱情保证书范文
2014/02/01 职场文书
商场主管竞聘书
2014/03/31 职场文书
社区重阳节活动总结
2015/03/24 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
2019消防宣传标语!
2019/07/10 职场文书