Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap Tooltips Plugin Bootstrap Scrollspy Plugin

Bootstrap Tab (Tab) Plugin

Tab (Tab) in Bootstrap Navigation Elements It has been introduced in the chapter. By combining some data attributes, you can easily create a tab interface. With this plugin, you can place content in tabs, or pill tabs, or even dropdown menu tabs.

If you want to refer to the functions of this plugin separately, then you need to refer to tab.js. Or as Bootstrap Plugin Overview As mentioned in the chapter mentioned, you can refer to bootstrap.js or the compressed version bootstrap.min.js

Usage

You can enable tabs in the following two ways:

via the data attributeYou need to add data-toggle="tab" or data-toggle="pill" to the anchor text link.
add nav and nav-tabs class to ul in which Bootstrap will apply the tab styles, adding nav and nav-pills class to ul in which Bootstrap will apply the Pill style
```
<ul>
　　　　-/a></li>
　　　　...
</ul>
```

Through JavaScriptYou can enable the tab using Javascript as shown below:

$('#myTab a').click(function(e) {
　　
　　
)

//　The following examples demonstrate how to activate tabs in different ways:
Select the tab by name
//　Select the first tab
Select the first tab
//　Select the last tab

//　Select the third tab (starting from index 0)
2

fade-in and fade-out effect

If you need to set a fade-in and fade-out effect for the tabs, please add .tab-to each must be added class, to fade in the initial content as shown in the following example:

　　　　/div>
　　　　/div>
　　　　/div>
　　　　/div>
</div>

Online Example

The following examples demonstrate the use of the data attribute in the Tab plugin and its fade-in and fade-out effects:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap Example<　-　Tab 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>
<ul　id="myTab"　class="nav　nav-tabs">
	
		-toggle="tab">
			　
		</a>
	</li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-　
			/
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content>
	<div class="tab-pane fade in active" id="home">
		<p>Basics Tutorial Website is a website that provides the latest web technology, this site provides free technical documents related to website building, helping web technology enthusiasts quickly get started and build their own websites. The early bird catches the worm - learn the basics, and you can go further.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS is a mobile operating system developed and released by Apple Inc. It was originally released　2007　year, iPhone, iPod Touch, and Apple　
			TV. iOS is derived from OS X, and they share the Darwin foundation. OS X operating system is used on Apple computers, and iOS is Apple's mobile version.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter is an open-source testing software. It is　100% pure Java application for load and performance testing.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and powerful enterprise-level applications, deployed on compatible application servers (such as JBOSS, Web Logic, etc.) in the J2EE on.
		</p>
	</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

This method can activate the tab element and its content container. A tab needs to be wrapped in a data-

　　　　-/a></li>
　　　　...
</ul>

　　　　/div>
　　　　...
</div>
<script>
　　　　
　　　　　　　　
　　　　)
</script>

Online Example

The following examples demonstrate the Tab plugin methods .tab usage. In this example, the second tab iOS is activated:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap Example<　-　Tab plugin methods/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>
<ul　id="myTab"　class="nav　nav-tabs">
	
		-/a>
	</li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-/
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			li><a href="#jmeter" tabindex="-1" data-toggle="tab">
				/a>
			</li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">
				/a>
			</li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content>
	<div class="tab-pane fade in active" id="home">
		<p>Basics Tutorial Website is a website that provides the latest web technology, this site provides free technical documents related to website building, helping web technology enthusiasts quickly get started and build their own websites. The early bird catches the worm - learn the basics, and you can go further.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS is a mobile operating system developed and released by Apple Inc. It was originally released　2007　year, iPhone, iPod Touch, and Apple　
			TV. iOS is derived from OS X, and they share the Darwin foundation. OS X operating system is used on Apple computers, and iOS is Apple's mobile version.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter is an open-source testing software. It is　100% pure Java application for load and performance testing.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and powerful enterprise-level applications, deployed on compatible application servers (such as JBOSS, Web Logic, etc.) in the J2EE on.
		</p>
	</div>
</div>
<script>
	
		1
	});
</script>
</body>
</html>

Test and see ‹/›

The results are as follows:

event

The table below lists the events used in the Tab plugin. These events can be used as hooks in functions.

event	Description	Example
show.bs.tab	This event is triggered when a tab is displayed, but it must occur before a new tab is displayed. Use event.target and event.relatedTarget to locate the active tab and the previously active tab.	$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 　　e.target　//　Active Tab 　　e.relatedTarget　//　Previous Active Tab )
shown.bs.tab	This event is triggered when a tab is displayed, but it must occur after a tab has already been displayed. Use event.target and event.relatedTarget to locate the active tab and the previously active tab.	$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 　　e.target　//　Active Tab 　　e.relatedTarget　//　Previous Active Tab )

Online Example

The following examples demonstrate the usage of the tab (tab) plugin events. In this example, the current and previously visited tabs will be displayed:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap Example<　-　Tab Plugin Event</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>
<hr>
	<p　class="active-tab"><strong>Active Tab</strong>：<span></span></p>
	<p　class="previous-tab"><strong>Previous Active Tab</strong>：<span></span></p>
<hr>
<ul　id="myTab"　class="nav　nav-tabs">
	<li　class="active"><a　href="#home"　data-toggle="tab">
		Basic Tutorial Website</a></li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-toggle="dropdown">
			Java <b class="caret"></b></a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content>
	<div class="tab-pane fade in active" id="home">
		<p>Basics Tutorial Website is a website that provides the latest web technology, this site provides free technical documents related to website building, helping web technology enthusiasts quickly get started and build their own websites. The early bird catches the worm - learn the basics, and you can go further.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS is a mobile operating system developed and released by Apple Inc. It was originally released　2007　year, iPhone, iPod Touch, and Apple　
			TV. iOS is derived from OS X, and they share the Darwin foundation. OS X operating system is used on Apple computers, and iOS is Apple's mobile version.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter is an open-source testing software. It is　100% pure Java application for load and performance testing.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and powerful enterprise-level applications, deployed on compatible application servers (such as JBOSS, Web Logic, etc.) in the J2EE on.
		</p>
	</div>
</div>
<script>
$(function() {
	$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
		//　Get the name of the currently activated tab
		var activeTab = $(e.target).text();　
		//　Get the name of the previously activated tab
		var previousTab = $(e.relatedTarget).text();　
		$(".active-tab span
		$(".previous-tab span
	});
});
</script>
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Tooltips Plugin Bootstrap Scrollspy Plugin