学习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批量设置属性readonly和disabled的方法
Jan 24 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
stripos函数知识点实例分享
2019/02/11 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Django的models模型的具体使用
2019/07/15 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
.net C#面试题
2012/08/28 面试题
护理专业的自荐信
2013/10/22 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
死亡诗社观后感
2015/06/05 职场文书
KTV员工管理制度
2015/08/06 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书