Bootstrap navigation elements
In this chapter we will explain some of the options provided for defining Bootstrap navigation elements. They use the same mark and the base class.nav.Bootstrap also provides a helper class for a shared tag and status. Change the modified class, you can switch between different styles.
Table navigation or label
Create a tabbed navigation menu:
- Start with an unordered list with aclass .nav of.
- Addclass .nav-tabs.
The following example illustrates this point:
Examples
<P> tabbed navigation menu </ 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> <a href = "#"> Java < / a> </ li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
Capsule navigation menu
Basic capsule navigation menu
If you need to style the label into the capsule, just use theclass .nav-pills .nav-tabscan be replaced by other steps were the same as above.
The following example illustrates this point:
Examples
<P> The basic capsule navigation menus </ 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> <a href = "#"> Java < / a> </ li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
The capsule vertical navigation menu
You can use theclass .nav-stacked in the use of class.nav, .nav-pills at the same time, so that the capsule vertically stacked.
The following example illustrates this point:
Examples
<P> vertical navigation menu capsule </ p>
<Ul class = "nav nav-pills nav -stacked">
<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> <a href = "#"> Java < / a> </ li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
Justified navigation
You can when the screen is wider than 768px, respectively, by using.nav, .nav-tabs or .nav, .nav-pillswhile usingclass.nav-justified, or capsule so that tabbed navigation menu with the parent element monospaced . On the smaller screen, navigation links will be stacked.
The following example illustrates this point:
Examples
<P> Justified navigation elements </ p>
<Ul class = "nav nav-pills nav -justified">
<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> <a href = "#"> Java < / a> </ li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul> <br> < br> <br>
<Ul class = "nav nav-tabs nav -justified">
<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> <a href = "#"> Java < / a> </ li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
Disable link
For each.nav class, if you add .disabled class,it will create a gray link, and disable thelink: hoverstate, as shown in the following example:
Examples
<P> navigation element to disable links </ p>
<Ul class = "nav nav-pills" >
<Li class = "active"> <a href = "#"> Home < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "disabled"> <a href = "#"> iOS (link disabled) </ a> </ li >
<Li> <a href = "#"> VB.Net < / a> </ li>
<Li> <a href = "#"> Java < / a> </ li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul> <br> < br>
<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 class = "disabled"> <a href = "#"> VB.Net (link disabled) </ a> </ li >
<Li> <a href = "#"> Java < / a> </ li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
The class will change <a> appearance will not change its function. Here, you need to use JavaScript to disable a custom link.
Drop-down menu
Navigation menu with drop-down menus using a similar syntax. By default, the list of items with some anchor attribute data collaboration to trigger an unordered list with.dropdown-menu class of.
With the tag drop-down menu
To add a drop-down menu to label as follows:
- Start with an unordered list with aclass .nav of.
- Addclass .nav-tabs.
- Add unordered list with.dropdown-menu class of.
Examples
<P> tag with a pull-down menu </ 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 = "#"> isolated link </ a> </ li>
</ Ul>
</ Li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
Capsule with a pull-down menu
Steps for creating drop-down menu with the same label, just need to.nav-tabs class to .nav-pills,as shown in the following examples:
Examples
<P> capsule with pull-down 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 = "#"> isolated link </ a> </ li>
</ Ul>
</ Li>
<Li> <a href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
More navigation element component instance
Tab and capsule tabs
class | description | Examples |
---|
.nav nav-tabs | Bookmark page | try it |
.nav nav-pills | Capsule tab | try it |
.nav nav-pills nav-stacked | Capsule tab to vertically stacked arrangement of | try it |
.nav-justified | Justified tabs on more than 768px screen, can easily make the tab label or capsule exhibits the same width by .nav-justified class. On the small screen, the navigation links render stack style. | try it |
.disabled | Disabling tabs | try it |
Add drop-down menu label | try it |
With pull-down menus capsule tab | try it |
.tab-content | And .tab-pane and data-toggle = "tab" (data-toggle = "pill") together and changed using the Settings tab page with the corresponding content label switching | try it |
.tab-pane | And .tab-content and data-toggle = "tab" (data-toggle = "pill") together and changed using the Settings tab page with the corresponding content label switching | try it |