学习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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
微信小程序如何自定义table组件
Jun 29 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
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Django实现学生管理系统
2019/02/26 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python自动点赞功能的实现思路
2020/02/26 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
中科前程Java笔试题
2016/11/20 面试题
幼儿园保育员岗位职责
2014/04/13 职场文书
应届生自荐信
2014/06/30 职场文书
婚宴致辞
2015/07/28 职场文书