学习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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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 选项及相关信息函数库
2006/12/04 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
win10安装python3.6的常见问题
2020/07/01 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
某公司面试题
2012/03/05 面试题
幼儿园教学随笔感言
2014/02/23 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
应收账款管理制度
2015/08/06 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers