【Bootstrap】下拉菜单Dropdown

下拉菜单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之前。写一个下拉菜单。要定义一个隐藏图层。当鼠标悬停或者点击对应的超级链接之后。此图层显示出来。当鼠标悬停在此隐藏图层。此隐藏图层依然显示。当鼠标离开此隐藏图层。则此隐藏图层继续从显示变成隐藏。非常麻烦的。

posted on 2017-04-26 20:45 ljbguanli 阅读(206) 评论(0) 收藏举报