Bootstrap下拉菜单效果实例代码分享


Posted in Javascript onJune 30, 2016

下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种。 

Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站。 

对于如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释。 

而且,官方网站的超级链接代码杂糅着许多没有用的参数。 

笔者研究了很久,才找到更改下拉菜单的方法。 
以下是IE8对Bootstrap的下拉菜单,以后各位使用Bootstrap记得千万要用IE8去测试,谷歌等高级浏览器掩盖了许多Bug。 

Bootstrap下拉菜单效果实例代码分享

提供如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式的修改方法, 

至于如何把下拉菜单的框框改没,笔者实在是无能为力的。 

以上的下拉菜单具体实现请看如下的代码: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>下拉菜单dropdown</title>
 </head>

 <body>
 <div class="btn-group">
   <!--将btn-default改成btn-link可以让其变为一个文字式的下拉菜单-->
 <button type="button" class="btn btn-link dropdown-toggle"
 data-toggle="dropdown">
 下拉菜单
    <!--这是下拉菜单的旁边的小三角形-->
 <span class="caret"></span>
 </button>
 <!--这里在class中的dropdown-menu再加入label-warning等属性可以改变下拉菜单的背景色-->
 <ul class="dropdown-menu" role="menu">
 <li>
    <!--这里的span中的class中的text-info是为了让下拉菜单里面的链接的颜色从黑色变成更像超级链接的蓝色-->
  <a href="#"><span class="text-info">项目一</span></a>
 </li>
 <li>
  <a href="#"><span class="text-info">项目二</span></a>
 </li>
 </ul>
 </div>
 </body>
</html>

没有jquery支持下拉菜单也是无法工作的。下拉菜单本来就是一个javascript组件。

没有bootstrap之前,写一个下拉菜单,要定义一个隐藏图层,当鼠标悬停或者点击相应的超级链接之后,此图层显示出来。当鼠标悬停在此隐藏图层,此隐藏图层依旧显示,当鼠标离开此隐藏图层,则此隐藏图层继续从显示变成隐藏,很麻烦的。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
js格式化时间小结
Nov 03 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
Vue的props父传子的示例代码
May 20 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 #Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 #Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 #Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 #Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 #Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 #Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 #Javascript
You might like
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
php调用C代码的实现方法
2014/03/11 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python画双y轴图像的示例代码
2019/07/07 Python
python 命名规范知识点汇总
2020/02/14 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
2015年护士节活动总结
2015/02/10 职场文书
会计出纳岗位职责
2015/03/31 职场文书
企业党建工作总结2015
2015/05/26 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
Python中基础数据类型 set集合知识点总结
2021/08/02 Python