Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Navigation Elements

In this chapter, we will explain some options provided by Bootstrap for defining navigation elements. They use the same tags and base classes .nav.Bootstrap also provides a helper class for sharing tags and states. Change the decorated class to switch between different styles.

Table navigation or tab

Create a tab-style navigation menu:

To add a dropdown menu to the label, follow these steps: .nav unordered list start.
Add class .nav-tabs.

, making the tab or capsule navigation menu the same width as the parent element. On smaller screens, navigation links will stack.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　标签式的导航菜单Test and see ‹/›

The result is as shown below:

<p>Tab navigation menu<

Capsule navigation menu

Basic capsule navigation menu .nav-pills If you need to change the tab to a capsule style, just use class .nav-tabs instead of

, making the tab or capsule navigation menu the same width as the parent element. On smaller screens, navigation links will stack.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　is enough, the other steps are the same as above./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>Basic capsule navigation menu</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="disabled"><a href="#">VB.Net (disabled link)</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Test and see ‹/›

The result is as shown below:

<p>Basic capsule navigation menu<

Vertical capsule navigation menu or-pills .nav, .nav .nav-stackedYou can use class

, making the tab or capsule navigation menu the same width as the parent element. On smaller screens, navigation links will stack.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　, making the capsules stack vertically./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>Vertical capsule navigation menu</p>
<ul class="nav nav-<p>Justified navigation elements<-<p>Vertical capsule navigation menu<
	<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="disabled"><a href="#">VB.Net (disabled link)</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Test and see ‹/›

The result is as shown below:

stacked">

Justified navigation 768You can stack navigation links when the screen width is greater than or-tabs px, through the use of or-pills .nav, .nav .nav-justifiedand use class

, making the tab or capsule navigation menu the same width as the parent element. On smaller screens, navigation links will stack.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　The following example demonstrates this:/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>Justified navigation elements</p>
<ul class="nav nav-<p>Justified navigation elements<-tabs nav
	<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="disabled"><a href="#">VB.Net (disabled link)</a></li>
	<li><a href="#">PHP</a></li>
</pills nav
<ul class="nav nav-<ul><br><br><br>-tabs nav
	<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="disabled"><a href="#">VB.Net (disabled link)</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Test and see ‹/›

The result is as shown below:

justified">

disable link .nav for each .disabled class, if added class, it will create a gray link and disable the link's :hover

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　status, as shown in the following example:/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>Disabled links in navigation elements</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<p>Disabled links in navigation elements</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="disabled"><a href="#">VB.Net (disabled link)</a></li>
	<li><a href="#">PHP</a></li>
</<li class="disabled"><a href="#">iOS (disabled link)<
<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>
	<ul><br><br>/a></li>
	<li class="disabled"><a href="#">VB.Net (disabled link)</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>

Test and see ‹/›

The result is as shown below:

<li><a href="#">Java<

This class only changes the appearance of the <a>, but does not change its function. Here, you need to use custom JavaScript to disable the link.

dropdown menu .dropdown-menu class unordered list.

Navigation menu and dropdown menu use similar syntax. By default, the anchor of the list item协同合作 to trigger the dropdown menu with

Capsule with dropdown menu tag

To add a dropdown menu to the label, follow these steps: .nav unordered list start.
Add class .nav-tabs.
Add with .dropdown-menu class unordered list.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　<p>Capsule with dropdown menu tag</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>Capsule with dropdown menu tag</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="#">Separate Link</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Test and see ‹/›

The result is as shown below:

Capsule with dropdown menu

The steps are the same as creating a tab with a dropdown menu, but you need to change .nav-tabs Change class to .nav-pills, as shown in the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Capsule with dropdown menu</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>Capsule with dropdown menu</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="#">Separate Link</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Test and see ‹/›

The result is as shown below:

More examples of navigation element components

tabs and pills tabs

Class	Description	Example
.nav nav-tabs	tabs	Try It
.nav nav-pills	pills tabs	Try It
.nav nav-pills nav-stacked	pills tabs stacked vertically	Try It
.nav-justified	tabs aligned at both ends, in screens larger than 768screen with px, through .nav-The justified class can easily make the tabs or pills display equal width. On small screens, navigation links display a stacked style.	Try It
.disabled	Disabled Tab	Try It
Add Tag Dropdown Menu		Try It
Capsule-style tabs with dropdown menus		Try It
.tab-content	with .tab-pane and data-toggle="tab" (data-toggle="pill" ) together with, set the content of the tab to change with the tab switching	Try It
.tab-pane	with .tab-content and data-toggle="tab" (data-together with toggle="pill", set the content of the tab to change with the tab switching	Try It

Bootstrap Navbar Bootstrap Input Groups