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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js同源策略详解
2015/05/21 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python学习笔记之装饰器
2020/08/06 Python
区分python中的进程与线程
2020/08/13 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
绘画设计学生的个人自我评价
2013/09/20 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
优秀员工演讲稿
2014/05/19 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
先进工作者申报材料
2014/12/23 职场文书
离婚案件被告代理词
2015/05/23 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
运动会新闻稿
2015/07/17 职场文书
详解Python requests模块
2021/06/21 Python