Bootstrap navigation
Brief introduction
In this tutorial, you will learn how to use the Bootstrap toolkit to create navigation-based, label, capsule label navigation.
We have a demo examples and related interpretations, including: basic-based label and capsule label navigation stack-based label and capsule labels or navigation vertical based label and capsule label drop-down menu, created using the navigation list navigation stack, using JavaScript to create clickable navigation (in different directions).
Basic tag
Two CSS class .nav and .nav-tabs are used to create a basic tag-based navigation. In the Bootstrap version v2.0.1, CSS class .nav style line numbers 2176-2220 (here also contains a number of related styles) declared. Line number 2222-2267 contains .nav-tabs style. The following example demonstrates how to use Bootstrap to create a basic tag-based navigation.
Bootstrap basic tag-based navigation examples
Examples
<Div class = "row">
<Div class = "span6">
<Ul class = "nav nav-tabs">
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> Tutorials </a> </ li>
<Li> <a href="#"> Practice Editor </a> </ li>
<Li> <a href="#"> Gallery </a> </ li>
<Li> <a href="#"> Contact </a> </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
Export
View Online
See examples above in a different browser window.
Basic capsule label
Once you know how to create a basic tag-based navigation by Bootstrap, in order to create a basic capsule-based label navigation becomes very easy. Here instead of using .nav-tabs class, but the use of .nav-pills class. .nav-pills style located bootstrap.css line number in 2222-2224, in bootstrap.css line number 2268-2280 repeat (use in the last instance to).
The following example shows how to create a basic capsule-based label navigation.
Bootstrap basic navigation example is based on the capsule label
Examples
<Div class = "row">
<Div class = "span8">
<Ul class = "nav nav-pills">
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> Tutorials </a> </ li>
<Li> <a href="#"> Practice Editor </a> </ li>
<Li> <a href="#"> Gallery </a> </ li>
<Li> <a href="#"> Contact </a> </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
Export
View Online
See examples above in a different browser window.
Label or vertical stacking
To create a stack of label-based navigation or vertical, you must add .nav-stacked, .nav and .nav-tabs class to your tag, the default is to create a level of label-based navigation. From the line number 2281-2309 includes .nav-stacked style. Here is an example.
Bootstrap stacked vertically or navigation examples of label-based
Examples
<Div class = "row">
<Div class = "span8">
<Ul class = "nav nav-tabs nav-stacked">
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> Tutorials </a> </ li>
<Li> <a href="#"> Practice Editor </a> </ li>
<Li> <a href="#"> Gallery </a> </ li>
<Li> <a href="#"> Contact </a> </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
Export
View Online
See examples above in a different browser window.
Stacked vertically or capsules labels
Similar to creating a stack or vertical labels, you need an additional CSS class used to create a stack-based capsule labels or vertical navigation. That is .nav-stacked class, located on the line number 2281-2309, including .nav-stacked style. Here is an example.
Bootstrap stacked vertically or navigation examples based capsule labels
Examples
<Div class = "row">
<Div class = "span2">
<Ul class = "nav nav-pills nav-stacked">
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> Tutorials </a> </ li>
<Li> <a href="#"> Practice Editor </a> </ li>
<Li> <a href="#"> Gallery </a> </ li>
<Li> <a href="#"> Contact </a> </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
Export
View Online
See examples above in a different browser window.
Label Based drop-down menu
You can use the drop-down menu navigation labels to create a Bootstrap based. Here are four CSS class - .dropdown, .dropdown-toggle, .dropdown-menu and .caret, is what you need, in addition to .nav and .nav-tabs class. bootstrap.css (version 2.0.1), the line number 1545-1547 contains .dropdown class styles, line numbers 1548-1553 includes .dropdown-toggle style, line number 1576-1632 includes .dropdown-menu styles, line numbers 1554-1575 contains .caret styles. In the demo example, also use another CSS class .divider, but not required.
Of course, you need to reference the three JavaScript files in the HTML file - jquery.js, bootstrap-dropdown.js and application.js. All of these are located in the docs / assets / js / folder.
Here is an example.
Examples of tag-based navigation Bootstrap dropdown menu
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap based label drop-down menu navigation Examples </ title>
<Meta name = "description" content = "Bootstrap tag-based drop-down menu navigation instance">
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap2.2.css" rel = "stylesheet">
<Style type = "text / css">
.container {
margin-top: 200px;
}
</ Style>
</ Head>
<Body>
<Div class = "container">
<Div class = "row">
<Div class = "span6">
<Ul class = "nav nav-tabs">
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> About </a> </ li>
<Li class = "dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> FrontEnd <b class = "caret"> </ b> </a>
<Ul class = "dropdown-menu">
<Li> <a href="#"> Twitter Bootstrap </a> </ li>
<Li> <a href="#"> Google Plus API </a> </ li>
<Li> <a href="#"> HTML5 </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> Examples </a> </ li>
</ Ul>
</ Li>
<Li class = "dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> BackEnd <b class = "caret bottom-up"> </ b> </a>
<Ul class = "dropdown-menu bottom-up pull-right">
<Li> <a href="#"> PHP </a> </ li>
<Li> <a href="#"> MySQL </a> </ li>
<Li> <a href="#"> PostgreSQL </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> Live Demos </a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Div>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / application.js"> </ script>
</ Body>
</ Html>
Note: We have added a separate style tags, and reference it in the style of a small collection, to create a top margin of the container 200 pixels, this is just for demonstration. Bootstrap data-toggle is a specific property. Set its value "dropdown" can create a drop-down menu navigation.
Export
Label-based drop-down menu:
Label based on the pull-down menu:
View Online
See examples above in a different browser window.
Based on the capsule label drop-down menu
Create tags and CSS based drop-down menu labels capsule, similar to create a label based on the pull-down menu. The only thing to do is to replace .nav-tabs to .nav-pills class. Here is an example.
Bootstrap based capsule label drop-down menu navigation examples
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap navigation example is based on the capsule label drop-down menu </ title>
<Meta name = "description" content = "Bootstrap based capsule label drop-down menu navigation instance">
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap2.2.css" rel = "stylesheet">
<Style type = "text / css">
.container {
margin-top: 200px;
}
</ Style>
</ Head>
<Body>
<Div class = "container">
<Div class = "row">
<Div class = "span6">
<Ul class = "nav nav-pills">
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> About </a> </ li>
<Li class = "dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> FrontEnd <b class = "caret"> </ b> </a>
<Ul class = "dropdown-menu">
<Li> <a href="#"> Twitter Bootstrap </a> </ li>
<Li> <a href="#"> Google Plus API </a> </ li>
<Li> <a href="#"> HTML5 </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> Examples </a> </ li>
</ Ul>
</ Li>
<Li class = "dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> BackEnd <b class = "caret bottom-up"> </ b> </a>
<Ul class = "dropdown-menu bottom-up pull-right">
<Li> <a href="#"> PHP </a> </ li>
<Li> <a href="#"> MySQL </a> </ li>
<Li> <a href="#"> PostgreSQL </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> Live Demos </a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Div>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / application.js"> </ script>
</ Body>
</ Html>
Export
Based on the capsule label drop-down menu:
Based on the capsule label pop-up menu:
View Online
See examples above in a different browser window.
Create a title with optional stacking navigation use navigation list
.nav-class can be used to create a stack suitable for sidebar navigation. You can add a caption to a set of links, located bootstrap.css line numbers in 2201-2221 .nav-list of defined styles (version 2.0.1). Here is an example.
Examples of navigation stack with navigation list
Examples
<Div class = "row">
<Div class = "span6">
<Ul class = "nav nav-list">
<Li class = "nav-header"> List header </ li>
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> Library </a> </ li>
<Li> <a href="#"> Applications </a> </ li>
<Li class = "nav-header"> Another list header </ li>
<Li> <a href="#"> Profile </a> </ li>
<Li> <a href="#"> Settings </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> Help </a> </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
Export
View Online
See examples above in a different browser window.
Use the navigation list created with the icon stack navigation
Examples
<Div class = "span6">
<Ul class = "nav nav-list">
<Li class = "nav-header"> List header </ li>
<Li class = "active"> <a href="#"> <i class = "icon-white icon-home"> </ i> Home </a> </ li>
<Li> <a href="#"> <i class = "icon-book"> </ i> Library </a> </ li>
<Li> <a href="#"> <i class = "icon-pencil"> </ i> Applications </a> </ li>
<Li class = "nav-header"> Another list header </ li>
<Li> <a href="#"> <i class = "icon-user"> </ i> Profile </a> </ li>
<Li> <a href="#"> <i class = "icon-cog"> </ i> Settings </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> <i class = "icon-flag"> </ i> Help </a> </ li>
</ Ul>
</ Div>
</ Div>
Export
View Online
See examples above in a different browser window.
Use JavaScript to create clickable navigation
You can Bootstrap Jquery plugin lightweight and simple tags to create tabbed navigation.
How to create a clickable navigation?
You need a file called "tabbable" the CSS class, to act as the role of packaging. Within it, adding "nav" and "nav-tabs" class to a "ul" element. In its interior, the use of 'data-toggle = "tab"' (applied to the relevant anchor element) create clickable areas. Then, "tab-content" div by creating a CSS class, there are some within the div div with CSS class "tab-pane" is used to store the actual content.
To make a clickable navigation to work, you need to reference two JS files - jquery.js and bootstrap-tab.js. Both files are located in the docs / assets / js folder.
Here is a demo clickable navigation instance.
Examples
<Div class = "row">
<Div class = "span4">
<Div class = "tabbable">
<Ul class = "nav nav-tabs">
<Li class = "active"> <a href="#1" data-toggle="tab"> Section 1 </a> </ li>
<Li class = ""> <a href="#2" data-toggle="tab"> Section 2 </a> </ li>
<Li class = ""> <a href="#3" data-toggle="tab"> Section 3 </a> </ li>
</ Ul>
<Div class = "tab-content">
<Div class = "tab-pane active" id = "1">
<P> You are watching section 1. </ P>
</ Div>
<Div class = "tab-pane" id = "2">
<P> You are watching Section 2. </ P>
</ Div>
<Div class = "tab-pane" id = "3">
<P> You are watching Section 3. </ P>
</ Div>
</ Div>
</ Div>
</ Div>
</ Div>
</ Div>
Click here to download the tutorial to use all the HTML, CSS, JS and image files.