欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2016-06-30 作者:yongh701 来源:转载
这篇文章主要为大家详细介绍了Bootstrap下拉菜单效果实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

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

笔者研究了很久,才找到更改下拉菜单的方法。

以下是IE8对Bootstrap的下拉菜单,以后各位使用Bootstrap记得千万要用IE8去测试,谷歌等高级浏览器掩盖了许多Bug。

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

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

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



 
 
 
 
 
 下拉菜单dropdown
 

 
 

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐