Bootstrap --表格菜单和胶囊式菜单

来源：互联网发布：防止sql注入的方法 php 编辑：程序博客网时间：2024/04/25 13:12

Bootstrap –表格菜单和胶囊式菜单1.新建一个html / jsp ；2.在新建的 html /jsp 中导入 bootstrap.css

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

1).创建表格菜单引用class： nav nav-tabsli 中的 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>

效果：
垂直胶囊效果图

0 0