navigation
Navigations available in Bootstrap have similar tags, starting with the base class .nav, which is the similar part. Changing the modification class can change the style.
<!DOCTYPE html><html><head><meta charset="utf-8"><!-- <link rel="stylesheet" >--><link rel="stylesheet" href="css/bootstrap.min.css" /><style>.container {margin-top: 20px;}</style></head><body><div><div><ul><li><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">Messages</a></li></ul></div><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>--><!--<script src="http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--></body></html>1. Tag page
Note that the .nav-tabs class requires the .nav base class. Just add .nav-stacked and you can stack it vertically.
<ul><li><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">Messages</a></li></ul>
2. Capsule-style tag page
nav-tabs is replaced with .nav-pills.
Disabled links:
<li ><a >Profile</a></li>
There is no mouse hover effect, link function is not affected
3. Use the drop-down menu
<ul><li><a data-toggle="dropdown" href="#">Dropdown <span> </span></a><ul><li><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">Messages</a></li></li><li><a href="#">Home</a></li></li><li><a href="#">Profile</a></li></ul>
4. Available variants
<span>Default</span><span>Primary</span><span>Success</span><span>Info</span><span>Warning</span><span>Danger</span>
5. Breadcrumb navigation
<ol><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li>Data</li></ol>
The above is the relevant knowledge about navigation, labels, and breadcrumb navigation (quality products) for Bootstrap component learning that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!