学习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 相关文章推荐
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
深入了解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
一个查看session内容的函数
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
小小聊天室Python代码实现
2016/08/17 Python
python 换位密码算法的实例详解
2017/07/19 Python
python配置grpc环境
2019/01/01 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
什么是python的id函数
2020/06/11 Python
Python常用断言函数实例汇总
2020/11/30 Python
四年级评语大全
2014/04/21 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2014年工商所工作总结
2014/12/09 职场文书
长城的导游词
2015/01/30 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
Python实现byte转integer
2021/06/03 Python
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
Python经常使用的一些内置函数
2022/04/11 Python
如何基于python实现单目三维重建详解
2022/06/25 Python