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 相关文章推荐
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
Node.js安装配置图文教程
May 10 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
如何更好的编写js async函数
May 13 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
vue实现百度语音合成的实例讲解
Oct 14 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
使用PHP免费发送定时短信的实例
2016/10/24 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
Python中实现结构相似的函数调用方法
2015/03/10 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
基于python监控程序是否关闭
2020/01/14 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
医德医风自我评价
2014/09/19 职场文书
2015年试用期工作总结
2014/12/12 职场文书
公积金贷款承诺书
2015/04/30 职场文书
工作报告范文
2019/06/20 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL