Bootstrap--Table menu and Capsule menu

bootstrap– Table menu and Capsule menu 1. Create a new html/jsp 2. Import Bootstrap.css in a new html/jsp

<link rel= "stylesheet" href= ". /css/bootstrap.css ">

1. CREATE Table menu Reference Class:nav nav-tabs Li's class = "Active" indicates that the menu option is selected by default

<div class= "Container" style= "padding:40px;" >
<p> Table navigation menu </p>
<br/>
    <ul class= "Nav nav-tabs" >
        <li class= "Active" ><a href= "#" >home</a></li>
        <li><a href= "#" >Java</a></li>
        <li><a href= "#" >C++</a></li>
        <li><a href= "#" >JSP</a></li>
        <li><a href= "#" >JavaScript</a></li>
    </ul>
</div> '

Effect:

2). Create a Water capsule menu
Reference Class:nav Nav-pills

class = "Active" in Li indicates that the menu option is selected by default

<div class= "Container" style= "padding:40px;" >
    <p> Level-style capsule menu </p>
    <br/>
    <ul class= "Nav nav-pills" >
    <li class= " Active "><a href=" # ">Home</a></li>
    <li><a href=" # ">Java</a></li>
    <li><a href= "#" >PHP</a></li>
    <li><a href= "#" >c++</a></li >
    <li><a href= "#" >oracle</a></li>
    <li><a href= "#" >sql</a> </li>
    </ul>

</div>

Effect:

3). Create Vertical Capsules Menu
Reference Class:nav Nav-pills nav-stacked

class = "Active" in Li indicates that the menu option is selected by default

<div class= "Container" style= "padding:40px;" >
    <p> Vertical-style capsule menu </p>
    <br/>
    <ul class= "nav nav-pills nav-stacked" >
    <li Class= "Active" ><a href= "#" >Home</a></li>
    <li><a href= "#" >Java</a>< /li>
    <li><a href= "#" >PHP</a></li>
    <li><a href= "#" >C++</a> </li>
    <li><a href= "#" >oracle</a></li>
    <li><a href= "#" >sql</ a></li>
    </ul>
</div>

Effect: