Latest web development tutorials

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:

Tabbed navigation menu

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:

Basic capsule navigation menu

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:

The capsule vertical navigation menu

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:

Justify navigation elements

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:

Navigation elements disable link
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:

With the tag drop-down menu

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:

Capsule with a pull-down menu

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