Bootstrap –表格菜单和胶囊式菜单 1.新建一个html / jsp ; 2.在新建的 html /jsp 中导入 bootstrap.css
<link rel="stylesheet" href="../css/bootstrap.css">
1).创建表格菜单 引用class: nav nav-tabs li 中的 class =”active” 表示默认选中该菜单选项
<div class="container" style="padding:40px;">
<p> 表格导航菜单 </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>`
效果:
2). 创建水胶囊菜单
引用class: nav nav-pills
li 中的 class =”active” 表示默认选中该菜单选项
<div class="container" style="padding:40px;">
<p> 水平式胶囊式菜单 </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>
效果:
3). 创建垂直胶囊菜单
引用class: nav nav-pills nav-stacked
li 中的 class =”active” 表示默认选中该菜单选项
<div class="container" style="padding:40px;">
<p> 垂直式胶囊式菜单 </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>
效果: