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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 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获取http请求的头信息实现步骤
2012/12/16 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
前端必学之PHP语法基础
2016/01/01 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
python获取txt文件词向量过程详解
2019/07/05 Python
django-csrf使用和禁用方式
2020/03/13 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
介绍一下RMI的基本概念
2016/12/17 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis