Bootstrap navigation, bootstrap

Bootstrap navigation, bootstrap
Navigation
The navigation components in Bootstrap depend on the same. nav class, And the status class is also shared. You can change the style of a modifier.
Tab
Note: The nav-tabs class dependency. nav base class

The Code is as follows:

<! DOCTYPE html> 




Capsule Tab
The HTML Tag is the same, but the. nav-pills class is used:
The Code is as follows:

<! DOCTYPE html> 





Capsules can be stacked vertically on tabs. You only need to add the. nav-stacked class.
The Code is as follows:

<! DOCTYPE html> 




Tabs aligned at both ends
On a screen larger than 768px, The. nav-justified class can easily make tabs or capsule labels show the same width. On a small screen, navigation links are stacked.
The navigation bar navigation link aligned at both ends has been discarded.
The Code is as follows:

<! DOCTYPE html> 





Disabled Link
You can add the. disabled class to any navigation component (the tab and capsule are tabs), so that the link is gray and there is no mouse hover effect.
The Code is as follows:


<! DOCTYPE html> 





Add drop-down menu
Use a little extra HTML code and add the JavaScript plug-in of the drop-down menu plug-in.
Tab with drop-down menu
The Code is as follows:


<! DOCTYPE html> 




Capsule tab with drop-down menu
The Code is as follows:

<! DOCTYPE html> 







Note: This article is from java tutorial network. For more information, see java tutorial network.