Dieses Tutorial beleuchtet die Verwendung des Bootstrap-Tab-Plugins für die Navigation. Im Allgemeinen ermöglicht die Begriffsregisterkarte dem Benutzer den Zugriff auf verschiedene Teile des Menüs oder der Webseite. Wir können dynamische Registerkarten erstellen, indem wir auf tabbare Bereiche oder Navigationsbereiche klicken, um zu Inhalten auf der Webseite zu navigieren. Die am häufigsten verwendete Navigation ist die Tab-basierte Navigation, die große Datenmengen auf kleinem Raum enthält und den Inhalt in verschiedene Navigationsbereiche unterteilt, in denen jeder Bereich einzeln angezeigt werden kann.
Das von Bootstrap bereitgestellte Tab-Plugin kann verwendet werden, um auf Inhalte in Tabs oder Pillen oder sogar über ein Dropdown-Menü zuzugreifen. Weitere Informationen zur Tab-basierten Navigation finden Sie unter diesem Link: Bootstrap-Navigationselemente.
lesen Sie auch:
- Bootstrap-Setup
- Bootstrap-Typografie
Wir können Tabs mit Tabs erstellen, indem wir die folgenden zwei Methoden verwenden:
- Über Datenattribute
- Über JavaScript
Bootstrap-Registerkarten über Datenattribute
Wir können eine Tab-Komponente erstellen, indem wir verwenden data-toggle=“tab“ auf jeder Registerkarte innerhalb einer Ankerregisterkarte. Wir verwenden die Tab-Inhalt class als übergeordnetes Element und Registerkartenbereich Klasse zum Erstellen von Registerkarten über Datenattribute. Wir erschaffen Registerkartenbereich für jede Registerkarte mit einer eindeutigen ID und deren Einbindung Tab-Inhalt Klasse. Fügen Sie beim Wechseln von einer Registerkarte zu einer anderen den Fade-Effekt für Registerkarten hinzu .verblassen Klasse für jeden .Tab-Bereich Klasse.
Das Folgende ist ein Beispiel:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div >
<h2>Tab Navigation via Data Attributes</h2>
<ul >
<li ><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
<li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
<li >
<a href="#" data-toggle="dropdown" >JS Frameworks<span ></span></a>
<ul >
<li><a data-toggle="tab" href="#dropdown1">JavaScript</a></li>
<li><a data-toggle="tab" href="#dropdown2">JQuery</a></li>
</ul>
</li>
</ul>
<div >
<div id="mydropdown1" >
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.
HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" >
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" >
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" >
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
</div>
</body>
</html>
- Führen Sie Bootstrap-Registerkarten über das DataAttributes-Beispiel aus
Bootstrap-Tabs über JavaScript
Wir erstellen die Tab-Navigation mithilfe von JavaScript-Code, wie im folgenden Beispiel gezeigt:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div >
<h2>Tab Navigation via JavaScript</h2>
<ul id="DemoTab">
<li><a href="#mydropdown1">HTML</a></li>
<li ><a href="#mydropdown2">CSS</a></li>
<li >
<a href="#" data-toggle="dropdown" >JS Frameworks<span ></span></a>
<ul >
<li><a href="#dropdown1">JavaScript</a></li>
<li><a href="#dropdown2">JQuery</a></li>
</ul>
</li>
</ul>
<div >
<div id="mydropdown1" >
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" >
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" >
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" >
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
</div>
</body>
</html>
- Führen Sie Bootstrap-Registerkarten über ein JavaScript-Beispiel aus
Bootstrap-Tab-Methoden
Mit der aufgerufenen Methode ist es möglich, das Tab-Element zu aktivieren und den Inhalt der jeweiligen Registerkarte anzuzeigen $().tab. Um auf einen bestimmten Container abzuzielen, sollten wir entweder data-target oder ein href im DOM haben. Das Folgende ist ein Beispiel:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoTab li:eq(1) a").tab('show');
});
</script>
</head>
<body>
<div >
<h2>Tab Navigation using Method</h2>
<ul id="DemoTab">
<li><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
<li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
<li >
<a href="#" data-toggle="dropdown" >JS Frameworks<span ></span></a>
<ul >
<li><a href="#dropdown1" data-toggle="tab">JavaScript</a></li>
<li><a href="#dropdown2" data-toggle="tab">JQuery</a></li>
</ul>
</li>
</ul>
<div >
<div id="mydropdown1" >
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" >
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" >
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" >
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
</div>
</body>
</html>
- Beispiel für die Bootstrap-Tab-Methode ausführen
Bootstrap-Tab-Ereignisse
Die folgende Tabelle zeigt vier Ereignisse, die mit Tab verwendet werden, um dem Tab mehr Funktionalität zu verleihen.
| show.bs.tab | Es wird verwendet, bevor die neue Registerkarte angezeigt wird. |
| angezeigt.bs.tab | Es wird ausgelöst, nachdem die Registerkarte angezeigt wurde. |
Das Folgende ist ein Beispiel:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab',function(e){
var activeTab=$(e.target).text();
var previousTab=$(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
</head>
<body>
<div >
<h2>Tab Navigation using Events</h2>
<ul >
<li ><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
<li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
<li >
<a href="#" data-toggle="dropdown" >JS Frameworks<span ></span></a>
<ul >
<li><a data-toggle="tab" href="#dropdown1">JavaScript</a></li>
<li><a data-toggle="tab" href="#dropdown2">JQuery</a></li>
</ul>
</li>
</ul>
<div >
<div id="mydropdown1" >
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" >
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" >
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" >
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
<p ><strong>Active Tab</strong>: <span></span></p>
<p ><strong>Previous Tab</strong>: <span></span></p>
</div>
</body>
</html>
- Führen Sie ein Beispiel für Bootstrap-Tab-Ereignisse aus
