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 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
简单了解JavaScript sort方法
2019/11/25 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
原生python实现knn分类算法
2019/10/24 Python
python 制作本地应用搜索工具
2021/02/27 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
中学生个人自我评价
2014/02/06 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python