English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap 导航元素

In diesem Kapitel werden wir einige Optionen erläutern, die Bootstrap bietet, um Navigationselemente zu definieren. Sie verwenden die gleiche Markierung und Basisklasse .nav.Bootstrap bietet auch einen Helferklasse für das Teilen von Markierungen und Zuständen. Ändern Sie die dekorierte Klasse, um zwischen verschiedenen Stilen zu wechseln.

Tabellennavigation oder Etiketten

Erstellen Sie ein navigationsmenü mit Etiketten:

  • Fügen Sie einem Tab .nav nicht aufgezählte Liste hinzu.

  • Fügen Sie class .nav-tabs.

Das folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">-8">　
	<title>Bootstrap　示例　-　<p>Tab-Navigationsmenü</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>
<p>Tab-Navigationsmenü</p>
<ul　class="nav　nav-tabs">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Kapsel-Navigationsmenü

Basis-Kapsel-Navigationsmenü

Wenn Sie die Tabs in ein Kapsel-Design ändern möchten, verwenden Sie einfach .nav-pills ersetzen .nav-tabs genug, andere Schritte sind wie oben beschrieben.

Das folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">-8">　
	<title>Bootstrap　示例　-　<p>Basis-Kapsel-Navigationsmenü</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>
<p>Basis-Kapsel-Navigationsmenü</p>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>
测试看看 ‹/›

结果如下所示：

vertikales Kapsel-Navigationsmenü

benutzt .nav, .nav-pills benutzt .nav-stacked, um die Kapseln vertikal zu stapeln.

Das folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">-8">　
	<title>Bootstrap　示例　-　<p>Vertikales Kapsel-Navigationsmenü</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>
<p>Vertikales Kapsel-Navigationsmenü</p>
<ul　class="nav　nav-pills nav-stacked">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>
测试看看 ‹/›

结果如下所示：

zentriert gliederte Navigation

können Sie die Breite des Bildschirms größer als 768px, indem .nav, .nav-tabs oder .nav, .nav-pills benutzt .nav-justified, um Tabs oder Kapseln mit dem übergeordneten Element gleich breit zu machen. Auf kleineren Bildschirmen werden die Navigationslinks gestapelt.

Das folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">-8">　
	<title>Bootstrap　示例　-　<p>Gliederungselemente mit zentriertem Text</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>
<p>Gliederungselemente mit zentriertem Text</p>
<ul　class="nav　nav-pills nav-justified">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul><br><br><br>
<ul　class="nav　nav-tabs nav-justified">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>
测试看看 ‹/›

结果如下所示：

deaktivierte Links

jeder .nav class, wenn .disabled class, wird ein grauer Link erstellt und der Link wird deaktiviert. :hover Status, wie im folgenden Beispiel gezeigt:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">-8">　
	<title>Bootstrap　示例　-　deaktivierte Links in Navigationselementen</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>
deaktivierte Links in Navigationselementen</p>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS (Link deaktiviert)</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul><br><br>
<ul　class="nav　nav-tabs">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li class="disabled"><a href="#">VB.Net (Link deaktiviert)</a></li>
	<li><a href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>	
</body>
</html>
测试看看 ‹/›

结果如下所示：

Diese Klasse ändert nur das Aussehen von <a>, nicht seine Funktion. Hier müssen Sie benutzerdefiniertes JavaScript verwenden, um Links zu deaktivieren.

Dropdown-Menü

Die Syntax für Navigationsmenüs und Dropdown-Menüs ist ähnlich. Standardmäßig arbeiten die Anker der Liste mit einigen Datenattributen zusammen, um .dropdown-menu class der nicht aufgezählten Liste.

Tab-Element mit Dropdown-Menü

Schritte, um ein Tab mit Dropdown-Menü hinzuzufügen, sind wie folgt:

  • Fügen Sie einem Tab .nav nicht aufgezählte Liste hinzu.

  • Fügen Sie class .nav-tabs.

  • Fügen Sie eine mit .dropdown-menu class der nicht aufgezählten Liste.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">-8">
	<title>Bootstrap　示例　-　<p>Tab-Element mit Dropdown-Menü</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>
<p>Tab-Element mit Dropdown-Menü</p>
<ul　class="nav　nav-tabs">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li　class="dropdown">
		<a　class="dropdown-toggle"　data-toggle="dropdown"　href="#">
			Java　<span　class="caret"></span>
		</a>
		<ul　class="dropdown-menu">
			<li><a　href="#">Swing</a></li>
			<li><a　href="#">jMeter</a></li>
			<li><a　href="#">EJB</a></li>
			<li　class="divider"></li>
			<li><a　href="#">分离的链接</a></li>
		</ul>
	</li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Kapseln mit Dropdown-Menü

Die Schritte sind die gleichen wie beim Erstellen eines Tabs mit Dropdown-Menü, nur dass .nav-tabs class ändert .nav-pillswie im folgenden Beispiel gezeigt:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">-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>
<p>带有下拉菜单的胶囊</p>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li　class="dropdown">
		<a　class="dropdown-toggle"　data-toggle="dropdown"　href="#">
			Java　<span　class="caret"></span>
		</a>
		<ul　class="dropdown-menu">
			<li><a　href="#">Swing</a></li>
			<li><a　href="#">jMeter</a></li>
			<li><a　href="#">EJB</a></li>
			<li　class="divider"></li>
			<li><a　href="#">分离的链接</a></li>
		</ul>
	</li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>
测试看看 ‹/›

结果如下所示：

更多导航元素组件示例

标签页与胶囊式标签页

类描述示例
.nav nav-tabs标签页试一试
.nav nav-pills胶囊式标签页试一试
.nav nav-pills nav-stacked胶囊式标签页以垂直方向堆叠排列的试一试
.nav-justified两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。试一试
.disabled禁用的标签页试一试
标签添加下拉菜单试一试
带下拉菜单的胶囊式标签页试一试
.tab-content与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一起使用，设置标签页对应的内容随标签的切换而更改试一试
.tab-pane与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一起使用，设置标签页对应的内容随标签的切换而更改试一试
Bootstrap 导航栏Bootstrap 输入框组