Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap 按钮下拉菜单

Dieses Kapitel erläutert, wie man mit Bootstrap-Klassen eine Navigationsleiste zu einer Schaltfläche hinzufügt. Um eine Navigationsleiste zu einer Schaltfläche hinzuzufügen, reicht es aus, einfach eine .btn-group Platzieren Sie die Schaltfläche und die Navigationsleiste im Behälter. Sie können auch <span>< verwenden/span> zur Anzeige, dass der Knopf eine Navigationsleiste ist.

Der folgende Beispiel zeigt einen grundlegenden einfachen Schaltflächen-Navigationstyp:

在线示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 示例　-　Grundlegender Schaltflächen-Navigationstyp</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="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle"　
			data-toggle="dropdown">
		默认　<span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a　href="#">功能</a></li>
		<li><a　href="#">另一个功能</a></li>
		<li><a　href="#">其他</a></li>
		<li　class="divider"></li>
		<li><a　href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始　
		<span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a　href="#">功能</a></li>
		<li><a　href="#">另一个功能</a></li>
		<li><a　href="#">其他</a></li>
		<li　class="divider"></li>
		<li><a　href="#">分离的链接</a></li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Geteilter Schaltflächen-Navigationstyp

Der geteilte Schaltflächen-Navigationstyp verwendet eine ähnliche Stil wie der herkömmliche Navigationsknopf, aber fügt der Navigationsleiste die ursprüngliche Funktion hinzu. Die linke Seite des geteilten Schaltflügels ist die ursprüngliche Funktion, und die rechte Seite ist der Umschalter zur Anzeige der Navigationsleiste.

在线示例

示例

<!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="btn-group">
	<button type="button" class="btn btn-default">默认</button>
	<button type="button" class="btn btn-default dropdown-toggle"　
			data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">切换下拉菜单</span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a　href="#">功能</a></li>
		<li><a　href="#">另一个功能</a></li>
		<li><a　href="#">其他</a></li>
		<li　class="divider"></li>
		<li><a　href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary">原始</button>
	<button type="button" class="btn btn-primary dropdown-toggle"　
			data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">切换下拉菜单</span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a　href="#">功能</a></li>
		<li><a　href="#">另一个功能</a></li>
		<li><a　href="#">其他</a></li>
		<li　class="divider"></li>
		<li><a　href="#">分离的链接</a></li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

按钮下拉菜单的大小

您可以使用带有各种大小按钮的下拉菜单：.btn-lg、.btn-sm 或 .btn-xs。

在线示例

示例

<!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="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle btn-lg"　
			data-toggle="dropdown">
		默认　<span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a　href="#">功能</a></li>
		<li><a　href="#">另一个功能</a></li>
		<li><a　href="#">其他</a></li>
		<li　class="divider"></li>
		<li><a　href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle btn-sm"　
			data-toggle="dropdown">
		原始　<span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a　href="#">功能</a></li>
		<li><a　href="#">另一个功能</a></li>
		<li><a　href="#">其他</a></li>
		<li　class="divider"></li>
		<li><a　href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-success dropdown-toggle btn-xs"　
			data-toggle="dropdown">
		成功　<span class="caret"></span>
	</button>
	<ul class="dropdown">-menu" role="menu">
		<li><a　href="#">功能</a></li>
		<li><a　href="#">另一个功能</a></li>
		<li><a　href="#">其他</a></li>
		<li　class="divider"></li>
		<li><a　href="#">分离的链接</a></li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可。

在线示例

示例

<!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="row" style="margin-left:50px; margin-top:200px">
	<div class="btn-group dropup">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认　
			<span class="caret"></span>
		</button>
		<ul class="dropdown">-menu" role="menu">
			<li><a　href="#">功能</a></li>
			<li><a　href="#">另一个功能</a></li>
			<li><a　href="#">其他</a></li>
			<li　class="divider"></li>
			<li><a　href="#">分离的链接</a></li>
		</ul>
	</div>
	<div class="btn-group dropup">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始　
			<span class="caret"></span>
		</button>
		<ul class="dropdown">-menu" role="menu">
			<li><a　href="#">功能</a></li>
			<li><a　href="#">另一个功能</a></li>
			<li><a　href="#">其他</a></li>
			<li　class="divider"></li>
			<li><a　href="#">分离的链接</a></li>
		</ul>
	</div>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Bootstrap 输入框组 Bootstrap 按钮组