Bootstrap源码解读下拉菜单(4)


Posted in Javascript onDecember 23, 2016

源码解读Bootstrap下拉菜单

基本用法

在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
使用方法如下:
1. 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素:<div class="dropdown"></div>
2. 使用一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致:data-toggle=”dropdown”
3. 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”:<ul class="dropdown-menu">

完整如下:

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 </ul>
</div>

实现原理

Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,因为“dropdown-menu”默认样式设置了“display:none”。实现源码如下:

.dropdown-menu {
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 font-size: 14px;
 text-align: left;
 list-style: none;
 background-color: #fff;
 -webkit-background-clip: padding-box;
   background-clip: padding-box;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, .15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

当点击父菜单项时,下拉菜单将会被显示出来,再次点击时,下拉菜单将继续隐藏。实现原理非常简单,通过js,给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说,默认情况,“div.dropdown”没有类名“open”,当用户第一次点击时,“div.dropdown”会添加类名“open”;当用户再次点击时,“div.dropdown”容器中的类名“open”又会被移除。实现源码如下:

.open > .dropdown-menu {
 display: block;
}

下拉分隔线

下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。
例如: <li role="presentation" class="divider"></li>
实现源码如下:

.dropdown-menu .divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}

菜单标题

组与组之间可以添加一个<li>,并添加类名“dropdown-header”可以给每个组添加一个头部(标题)。
例如:<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
实现源码:

.dropdown-header {
 display: block;
 padding: 3px 20px;
 font-size: 12px;
 line-height: 1.42857143;
 color: #999;
}

对齐方式

下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名,
例如:<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
实现源码:

.dropdown-menu.pull-right {
 right: 0;
 left: auto;
}
.dropdown-menu-right {
 right: 0;
 left: auto;
}

不过这样的话,下拉列表会跑到页面的最右边去,我们显然不希望这样,所以一定要为.dropdown添加float:left的css样式:

.dropdown{
 float: left;
}

另外,还有个类名“dropdown-menu-left”,其实就是下拉菜单与父容器左边对齐的默认效果,

实现源码:

.dropdown-menu-left {
 right: auto;
 left: 0;
}

菜单项状态

下拉菜单项的默认的状态有悬浮状态(:hover)和焦点状态(:focus),实现源码如下:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
 color: #262626;
 text-decoration: none;
 background-color: #f5f5f5;
}

另外还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项<li>上添加对应的类名“active”或“disabled”。

实现源码如下:

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
 color: #fff;
 text-decoration: none;
 background-color: #428bca;
 outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
 color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JS的反射问题
Apr 07 Javascript
JavaScript类库D
Oct 24 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
原生js实现验证码功能
Mar 16 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
jquery dataview数据视图插件使用方法
Dec 23 #Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 #Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
You might like
php 文件上传类代码
2011/08/06 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python基础篇之初识Python必看攻略
2016/06/23 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
python让函数不返回结果的方法
2020/06/22 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
生物科学专业个人求职信范文
2013/12/07 职场文书
安全生产宣传标语
2014/06/06 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
Python Flask实现进度条
2022/05/11 Python