学习Bootstrap组件之下拉菜单


Posted in Javascript onJuly 28, 2015

Bootstrap 是由Twitter 工程师推出的基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架,我们可以把它想象成一个定义了很多效果的CSS与JS的库,库里面已经定义好了各种组件的显示效果与动画。

.dropdown——设置父元素为下拉菜单组件,向下弹出子菜单;
.dropup——设置父元素为下拉菜单组件,向上弹出子菜单;
.dropdown-toggle——设置按钮为下拉菜单切换按钮;
.dropdown-menu——设置ul元素为下拉菜单;
.dropdown-menu-right——将菜单右对齐;
.pull-right——将菜单组件的父元素右对齐;
.dropdown-header——为菜单项添加标题;
.divider——为菜单项添加分割线;
.disabled——禁用相应菜单项;

实现代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1"> 
 <title>CSS全局样式_下拉菜单</title> 
 <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 
 <script src="jquery-1.11.1.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container"> 
 <div class="dropdown pull-right"> 
 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
 下拉菜单 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> 
 <li role="presentation" class="dropdown-header">中超Big4</li> 
 <li><a href="#" role="menuitem">上海上港</a></li> 
 <li><a href="#" role="menuitem">广州恒大</a></li> 
 <li><a href="#" role="menuitem">山东鲁能</a></li> 
 <li class="disabled"><a href="#" role="menuitem">北京国安</a></li> 
 <li role="presentation" class="divider"></li> 
 <li role="presentation" class="dropdown-header">中超5-8</li> 
 <li><a href="#" role="menuitem">上海申花</a></li> 
 <li><a href="#" role="menuitem">江苏舜天</a></li> 
 <li><a href="#" role="menuitem">长春亚泰</a></li> 
 <li><a href="#" role="menuitem">河南建业</a></li> 
 </ul> 
 </div> 
</div> 
 
</body> 
</html>

实现效果:

学习Bootstrap组件之下拉菜单

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

以上就是本文的全部内容,希望对于大家使用Bootstrap组件制作下拉菜单有所帮助。

Javascript 相关文章推荐
javascript cookies操作集合
Apr 12 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 #Javascript
深入理解JavaScript中的箭头函数
Jul 28 #Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 #Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 #Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 #Javascript
CSS3实现动态背景登录框的代码
Jul 28 #Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 #Javascript
You might like
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
简单的php购物车代码
2020/06/05 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
基于vue.js实现的分页
2018/03/13 Javascript
JavaScript实现区块链
2018/03/14 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
python3 pygame实现接小球游戏
2019/05/14 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
好的自荐信的要求
2013/10/30 职场文书
优秀应届生推荐信
2013/11/09 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
销售求职信范文
2014/05/26 职场文书
个性车贴标语
2014/06/24 职场文书
捐书倡议书
2014/08/29 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
不同意离婚答辩状
2015/05/22 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
JavaScript实现简单的音乐播放器
2022/08/14 Javascript