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 相关文章推荐
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
js登录弹出层特效
Mar 07 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
js中url对象化管理分析
Dec 29 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
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 事件机制(2)
2011/03/23 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python 接收处理外带的参数方法
2018/12/03 Python
详解Python中is和==的区别
2019/03/21 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
亿企通软件测试面试题
2012/04/10 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
总经理助理的职责
2014/03/14 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers