Bootstrap 菜鳥教程

Bootstrap 插件

Bootstrap 按鈕組 Bootstrap 字體圖標(biāo)(Glyphicons)

Bootstrap 下拉菜單

本章將重點介紹 Bootstrap 下拉菜單。下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。這可以通過與下拉菜單(Dropdown) JavaScript 插件的互動來實現(xiàn)。

如需使用下拉菜單，只需要在 class .dropdown 內(nèi)加上下拉菜單即可。下面的示例演示了基本的下拉菜單：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 下拉菜單(Dropdowns)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主題
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">數(shù)據(jù)挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">數(shù)據(jù)通信/網(wǎng)絡(luò)</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
		</li>
	</ul>
</div>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

選項

對齊

通過向 .dropdown-menu 添加 class .pull-right 來向右對齊下拉菜單。下面的示例演示了這點：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 向右對齊下拉菜單</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">主題
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right" role="menu" 
		aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">數(shù)據(jù)挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">數(shù)據(jù)通信/網(wǎng)絡(luò)</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
		</li>
	</ul>
</div>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

標(biāo)題

您可以使用 class dropdown-header 向下拉菜單的標(biāo)簽區(qū)域添加標(biāo)題。下面的示例演示了這點：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 下拉菜單標(biāo)題</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主題
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" class="dropdown-header">下拉菜單標(biāo)題</li>
		<li role="presentation" >
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">數(shù)據(jù)挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">
				數(shù)據(jù)通信/網(wǎng)絡(luò)
			</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">下拉菜單標(biāo)題</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
		</li>
	</ul>
</div>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

類	描述	示例
.dropdown	指定下拉菜單，下拉菜單都包裹在 .dropdown 里	嘗試一下
.dropdown-menu	創(chuàng)建下拉菜單	嘗試一下
.dropdown-menu-right	下拉菜單右對齊	嘗試一下
.dropdown-header	下拉菜單中添加標(biāo)題	嘗試一下
.dropup	指定向上彈出的下拉菜單	嘗試一下
.disabled	下拉菜單中的禁用項	嘗試一下
.divider	下拉菜單中的分割線	嘗試一下

Bootstrap 菜鳥教程

Bootstrap 插件

Bootstrap 下拉菜單

在線示例

選項

對齊

在線示例

標(biāo)題

在線示例

更多示例