Bootstrap Grundlagen教程

Bootstrap Plugin

Bootstrap-Tab-Plugin Bootstrap-Dropdown-Menü-Plugin

Bootstrap Scroll-Overwachen (Scrollspy) Plugin

Scroll-Overwachen (Scrollspy) Plugin, das automatisch die entsprechenden Navigationsziele aktualisiert, aktualisiert basierend auf der Position des Rollbalkens, automatisch die entsprechenden Navigationsziele hinzufügt. Seine grundlegende Implementierung fügt basierend auf der Position des Rollbalkens, während Sie rollen, der Navigationsleiste hinzufügt .active class.

Wenn Sie die Funktionen des Plugins einzeln verwenden möchten, müssen Sie scrollspy.js。Oder wie Bootstrap Plugin Übersicht wie im Kapitel erwähnt, können Sie bootstrap.js oder die komprimierte Version bootstrap.min.js。

Verwendung

Sie können ein Scroll-Overwachen-Verhalten der Navigationsleiste hinzufügen:

durch das data-Attribut：Fügen Sie dem Element hinzu, das Sie überwachen möchten (normalerweise dem body) data-spy="scroll"Dann fügen Sie Bootstrap hinzu .nav ID oder Class-Attribut des übergeordneten Elements des Komponenten data-targetUm sicherzustellen, dass es ordnungsgemäß funktioniert, müssen Sie sicherstellen, dass es im Hauptteil der Seite ein Element mit der ID gibt, die Sie überwachen möchten.
```
<body data-spy="scroll" data-target=".navbar-example">
...
<div>
　　　　<ul>
　　　　　　　　...
　　　　</ul>
</div>
...
</body>
```
durch JavaScript：Sie können die Scrollspy über JavaScript aufrufen, den zu überwachenden Element auswählen und dann .scrollspy() Funktion：
```
$('body').scrollspy({ target: '.navbar-example'})
```

Online-Beispiel

Der folgende Beispiel zeigt die Verwendung des Scrollspy-Plugins über Datenattribute：

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 示例　-　Scrollspy-Plugin</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>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container"-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java
						<b class="caret"></b>
					</a>
					<ul class="dropdown"-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>　
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<h4　id="ios">iOS</h4>
	<p>iOS ist ein von Apple Inc. entwickelt und veröffentlichtes Mobilbetriebssystem. Ursprünglich wurde es　2007　Jahr zum ersten Mal veröffentlicht iPhone, iPod Touch und Apple　
		TV. iOS ist ein Ableger von OS X und teilt den Darwin-Basis. OS X ist der Betriebssystem, das auf Apple-Computern verwendet wird, und iOS ist die mobile Version von Apple.
	</p>
	<h4　id="svn">SVN</h4>
	<p>Apache Subversion, normalerweise mit SVN abgekürzt, ist eine Open-Source-versionskontrollsoftware. Subversion wurde von CollabNet Inc.　2000 wurde erstellt. Aber jetzt hat es sich zu einem Projekt der Apache Software Foundation entwickelt und verfügt daher über eine reiche Entwickler- und Benutzercommunity.
	</p>
	<h4　id="jmeter">jMeter</h4>
	<p>jMeter ist eine Open-Source-Testsoftware. Es ist　10100% reines Java-Anwendung, für Last- und Leistungstests.
	</p>
	<h4　id="ejb">EJB</h4>
	<p>Enterprise Java Beans (EJB) ist eine Entwicklungsumgebung für hoch skalierbare und leistungsstarke Enterprise-Anwendungen, die auf kompatiblen Anwendungsservern (wie JBOSS, Web Logic usw.) implementiert wird.2EE.
	</p>
	<h4　id="spring">Spring</h4>
	<p>Der Spring-Framework ist eine Open-Source-Java-Plattform, die eine umfassende Infrastrukturunterstützung für die schnelle Entwicklung leistungsstarker Java-Anwendungen bietet.
	</p>
	<p>Der Spring-Framework wurde ursprünglich von Rod Johnson geschrieben und　2003　Jahr　6　Monat zum ersten Mal veröffentlicht wurde unter Apache　2.0 unter der Lizenz.
	</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Optionen

durch Datenattribute oder JavaScript übermittelt. Der folgende Tisch zeigt diese Optionen an：

Name der Option	Typ/Standardwert	Name der Datenattribut	描述
offset	number Standardwert：10	data-offset	abgelegte Pixelabstand vom oberen Rand, wenn der Rollposition berechnet wird.

Methode

.scrollspy('refresh')Wenn Sie die scrollspy-Methode über JavaScript aufrufen, müssen Sie die .refresh Diese Methode wird verwendet, um das DOM zu aktualisieren. Dies ist besonders nützlich, wenn sich das DOM ändert (d.h. Sie fügen oder entfernen bestimmte Elemente). Below ist die Syntax, um diese Methode zu verwenden.

$('[data-spy="scroll"]').each(function() {
　　var $spy = $(this).scrollspy('refresh')}
});

Online-Beispiel

下面的示例演示了 .scrollspy('refresh') Verwendung der Methode：

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例　-　Scrollspy-Plugin-Methode</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>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container"-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java　
						<b class="caret"></b>
					</a>
					<ul class="dropdown"-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<div　class="section">
		<h4　id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			×　diesen Abschnitt löschen</a></small>
		</h4>
		<p>iOS ist ein von Apple Inc. entwickelt und veröffentlichtes Mobilbetriebssystem. Ursprünglich wurde es　2007　Jahr zum ersten Mal veröffentlicht iPhone, iPod Touch und Apple　
			TV. iOS ist ein Abkömmling von OS X und teilt Darwin-Basis. OS X-Betriebssystem wird auf Apple-Computern verwendet, iOS ist die mobile Version von Apple./p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small></small></h4>
		<p>Apache Subversion, normalerweise mit SVN abgekürzt, ist eine Open-Source-versionskontrollsoftware. Subversion wurde von CollabNet Inc.　2000 Jahr erstellt. Aber es hat sich inzwischen zu einem Projekt der Apache Software Foundation entwickelt und verfügt daher über eine reiche Entwickler- und Benutzercommunity.</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　diesen Abschnitt löschen</a></small>
		</h4>
		<p>jMeter ist eine Open-Source-Testsoftware. Es ist　100%　reines Java-Anwendung, das für Last- und Leistungstests verwendet wird.</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) ist eine Entwicklungsumgebung für hoch skalierbare und leistungsstarke Enterprise-Anwendungen, die auf kompatiblen Anwendungsservern (wie JBOSS, Web Logic usw.) implementiert wird.2EE　geplant.</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>Das Spring-Framework ist eine Open-Source-Plattform für Java, die eine umfassende Infrastruktur für die schnelle Entwicklung leistungsstarker Java-Anwendungen bietet.</p>
		<p>Der Spring-Framework wurde ursprünglich von Rod Johnson geschrieben und　2003　Jahr　6　Monat zum ersten Mal veröffentlicht wurde unter Apache　2.0　Lizenz.</p>
	</div>
</div>
<script　type="text/javascript">
	$(function() {
		removeSection　=　function(e)　{
			$(e).parents(".section").remove();
			$('[data-spy="scroll"]').each(function() {
				var $spy = $(this).scrollspy('refresh')}
				});
		}
		$("#myScrollspy").scrollspy();
});
</<script>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

事件

下表列出了滚动监听中要用到的事件。这些事件可在函数中当钩子使用。

事件	描述	Beispiel
activate.bs.scrollspy	每当一个新项目被滚动监听激活时，触发该事件。	$('#myScrollspy').on('activate.bs.scrollspy', function () { 　　//　执行一些动作... });

Online-Beispiel

下面的示例演示了 activate.bs.scrollspy 事件的用法：

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例　-　滚动监听(Scrollspy)插件事件</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>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container"-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">
						Java　<b class="caret"></b>
					</a>
					<ul class="dropdown"-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<div　class="section">
		<h4　id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			×　diesen Abschnitt löschen</a></small>
		</h4>
		<p>iOS ist ein von Apple Inc. entwickelt und veröffentlichtes Mobilbetriebssystem. Ursprünglich wurde es　2007　Jahr zum ersten Mal veröffentlicht iPhone, iPod Touch und Apple　
			TV. iOS ist ein Abkömmling von OS X und teilt Darwin-Basis. OS X-Betriebssystem wird auf Apple-Computern verwendet, iOS ist die mobile Version von Apple./p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small></small></h4>
		<p>Apache Subversion, normalerweise mit SVN abgekürzt, ist eine Open-Source-versionskontrollsoftware. Subversion wurde von CollabNet Inc.　2000 Jahr erstellt. Aber es hat sich inzwischen zu einem Projekt der Apache Software Foundation entwickelt und verfügt daher über eine reiche Entwickler- und Benutzercommunity.</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　diesen Abschnitt löschen</a></small>
		</h4>
		<p>jMeter ist eine Open-Source-Testsoftware. Es ist　100%　reines Java-Anwendung, das für Last- und Leistungstests verwendet wird.</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) ist eine Entwicklungsumgebung für hoch skalierbare und leistungsstarke Enterprise-Anwendungen, die auf kompatiblen Anwendungsservern (wie JBOSS, Web Logic usw.) implementiert wird.2EE　geplant.</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>Das Spring-Framework ist eine Open-Source-Plattform für Java, die eine umfassende Infrastruktur für die schnelle Entwicklung leistungsstarker Java-Anwendungen bietet.</p>
		<p>Der Spring-Framework wurde ursprünglich von Rod Johnson geschrieben und　2003　Jahr　6　Monat zum ersten Mal veröffentlicht wurde unter Apache　2.0　Lizenz.</p>
	</div>
</div>
<span　id="activeitem"　style="color:red;"></span>
<script　type="text/javascript">
	$(function() {
		removeSection　=　function(e)　{
			$(e).parents(".section").remove();
			$('[data-spy="scroll"]').each(function() {
				var $spy = $(this).scrollspy('refresh')}
				});
		}
		$("#myScrollspy").scrollspy();
		$('#myScrollspy').on('activate.bs.scrollspy', function () {
			var currentItem = $(".nav li.active > a").text();
			$("#activeitem").html("Derzeit betrachten Sie　-　"　+　currentItem);
		});
});
</<script>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Mehr Beispiele

Erstellen Sie einen horizontalen Scroll-Abhörer

Die folgenden Beispiele zeigen, wie man einen horizontalen Scroll-Abhörer erstellt:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Beispiel</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<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>
	<style>
		body {
			position: relative;　
		}
		#section1　{padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
		#section2　{padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
		#section3　{padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
		#section41　{padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
		#section42　{padding-top:50px;height:500px;color: #fff; background-color: #009688;}
	</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container"-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
			</button">
			<a class="navbar-brand" href="#">WebSiteName</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a　href="#section"1">Section　1</a></li>
					<li><a　href="#section"2">Section　2</a></li>
					<li><a　href="#section"3">Section　3</a></li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section　4　<span class="caret"></span></a>
						<ul class="dropdown"-menu">
							<li><a　href="#section"41">Section　4-1</a></li>
							<li><a　href="#section"42">Section　4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div　id="section1" class="container-fluid">
	<h1>Section　1</h1>
	<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
	<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
	</div>
	<div　id="section2" class="container-fluid">
		<h1>Section　2</h1>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
	</div>
	<div　id="section3" class="container-fluid">
		<h1>Section　3</h1>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
	</div>
	<div　id="section41" class="container-fluid">
		<h1>Section　4　Untermenü　1</h1>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
	</div>
	<div　id="section42" class="container-fluid">
		<h1>Section　4　Untermenü　2</h1>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
		<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie dabei die Navigationsleiste! Probieren Sie, diesen Abschnitt zu scrollen, und überprüfen Sie dabei die Navigationsleiste!</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Wie erstellt man einen vertikalen Scroll-Abhörer

Die folgenden Beispiele zeigen, wie man einen vertikalen Scroll-Abhörer erstellt:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Beispiel</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<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>
	<style>
		body {
			position: relative;
		}
		ul.nav-pills {
			top:　20px;
			position: fixed;
		}
		div.col-sm-9　div {
			height:　250px;
			font-size:　28px;
		}
		#section1　{color: #fff; background-color: #1E88E5;}
		#section2　{color: #fff; background-color: #673ab7;}
		#section3　{color: #fff; background-color: #ff9800;}
		#section41　{color: #fff; background-color: #00bcd4;}
		#section42　{color: #fff; background-color: #009688;}
		@media screen and (max-width:　810px) {
			#section1, #section2, #section3, #section41, #section42　　{
				margin-left:　150px;
			}
		}
	</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
	<div class="row">
		<nav class="col-sm-3" id="myScrollspy">
			<div class="container"-fluid">　
			<div class="container"-fluid">　
			<ul class="nav nav-pills nav-stacked">
				<li class="active"><a href="#section1">Section　1</a></li>
				<li><a　href="#section"2">Section　2</a></li>
				<li><a　href="#section"3">Section　3</a></li>
				<li class="dropdown">
					<a class="dropdown"-toggle" data-toggle="dropdown" href="#">Section　4　<span class="caret"></span></a>
					<ul class="dropdown"-menu">
						<li><a　href="#section"41">Section　4-1</a></li>
						<li><a　href="#section"42">Section　4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div　class="col-sm-9">
			<div　id="section1">　　　　
				<h1>Section　1</h1>
				<p>Probieren Sie diesen Abschnitt zu scrollen und währenddessen die Navigationsliste betrachten!>/p>
			</div>
			<div　id="section2">　
				<h1>Section　2</h1>
				<p>Probieren Sie diesen Abschnitt zu scrollen und währenddessen die Navigationsliste betrachten!>/p>
			</div>　　　　　　　　
			<div　id="section3">　　　　　　　　　
				<h1>Section　3</h1>
				<p>Probieren Sie diesen Abschnitt zu scrollen und währenddessen die Navigationsliste betrachten!>/p>
			</div>
			<div　id="section41">　　　　　　　　　
				<h1>Section　4-1</h1>
				<p>Probieren Sie diesen Abschnitt zu scrollen und währenddessen die Navigationsliste betrachten!>/p>
			</div>　　　　　　
			<div　id="section42">　　　　　　　　　
				<h1>Section　4-2</h1>
				<p>Probieren Sie diesen Abschnitt zu scrollen und währenddessen die Navigationsliste betrachten!>/p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap-Tab-Plugin Bootstrap-Dropdown-Menü-Plugin