Bootstrap下拉菜单效果实例代码分享
下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊，而是导航条中常见的那种。
Bootstrap官方网站对下拉菜单Dropdown的解释很少，即使是他们的英文官方网站。
对于如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改，如何把下拉菜单更改成普通的超级链接而不是文字的样式，官方网站是完全没有具体的解释。
而且，官方网站的超级链接代码杂糅着许多没有用的参数。
笔者研究了很久，才找到更改下拉菜单的方法。
以下是IE8对Bootstrap的下拉菜单，以后各位使用Bootstrap记得千万要用IE8去测试，谷歌等高级浏览器掩盖了许多Bug。
提供如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改，如何把下拉菜单更改成普通的超级链接而不是文字的样式的修改方法，
至于如何把下拉菜单的框框改没，笔者实在是无能为力的。
以上的下拉菜单具体实现请看如下的代码：
<!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个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS组件Bootstrap实现下拉菜单效果代码，包括了JS组件Bootstrap实现下拉菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。 如果您想要单独引用该插
-
本文向大家介绍JS模拟bootstrap下拉菜单效果实例，包括了JS模拟bootstrap下拉菜单效果实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考，具体如下： 模拟bootstrap下拉菜单 在工作中要切一个效果：点击导航栏，则出现下列菜单，但是当点击其他地方的时候，就隐藏子菜单，效果有点类似于bootstrap 的“下拉
-
本文向大家介绍第八篇Bootstrap下拉菜单实例代码，包括了第八篇Bootstrap下拉菜单实例代码的使用技巧和注意事项，需要的朋友参考一下 先给大家说下我的实现思路：给div一个class “dropdown”，将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单。 以上所述是小编给大家介绍的第八篇Bootstrap下拉菜单实例代码的全部叙述，希望对大家有所帮助，如果大家有任何疑问
-
本文向大家介绍Bootstrap下拉菜单Dropdowns的实现代码，包括了Bootstrap下拉菜单Dropdowns的实现代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Bootstrap下拉菜单的具体代码，供大家参考，具体内容如下 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现的fixedMenu下拉菜单效果代码，包括了jQuery实现的fixedMenu下拉菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码。分享给大家供大家参考。具体如下： 这里演示了仿Google风格的下拉菜单，其核心实际上是jquery.fixedMenu菜单，使用了jquery.fixedMenu
-
本文向大家介绍微信小程序下拉菜单效果的实例代码，包括了微信小程序下拉菜单效果的实例代码的使用技巧和注意事项，需要的朋友参考一下 总结 以上所述是小编给大家介绍的微信小程序下拉菜单效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！