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 阴影插件代码分享
Jan 09 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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 金额数字转换成英文
2010/05/06 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
Webpack中publicPath路径问题详解
2018/05/03 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Python中的yield浅析
2014/06/16 Python
Python中运行并行任务技巧
2015/02/26 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
营销人才自我鉴定范文
2013/12/25 职场文书
《自选商场》教学反思
2014/02/14 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
教师个人事迹材料
2014/12/17 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书