This chapter explains some of the options provided by bootstrap for defining navigational elements, which use the same tags and base classes. Nav. Bootsrtap also provides a helper class for sharing tokens and states. Change the modified class to switch between different styles.
Table navigation or labels
Create a tabbed navigation menu
1. Start with an unordered list of Class.nav classes.
2, add Class.nav-tabs class.
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>bootstrap Experience Example: Tabbed navigation menu </title>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "initial-scale=1.0"/>
<link rel= "stylesheet" href= "Bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<body>
<div class= "Container" >
<ul class= "Nav nav-tabs" >
<li class= "Active" ><a href= "#" >Html5</a></li>
<li><a href= "#" >Css3</a></li>
<li><a href= "#" >JavaScript</a></li>
<li><a href= "#" >jQuery</a></li>
<li><a href= "#" >jQueryUI</a></li>
<li><a href= "#" >Bootstrap</a></li>
<li><a href= "#" >C#.Net</a></li>
<li><a href= "#" >MsSql</a></li>
</ul>
</div>
<script src= "Jquery/jquery-2.1.4.js" ></script>
<script src= "Bootstrap-3.3.5-dist/js/bootstrap.min.js" ></script>
</body>
Bootstrap Experience Example: Tabbed navigation menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
