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

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="#">homea>li>
        <li><a href="#">Javaa>li>
        <li><a href="#">C++a>li>
        <li><a href="#">JSPa>li>
        <li><a href="#">JavaScripta>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="#">Homea>li>
    <li><a href="#">Javaa>li>
    <li><a href="#">PHPa>li>
    <li><a href="#">C++a>li>
    <li><a href="#">oraclea>li>
    <li><a href="#">sqla>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="#">Homea>li>
    <li><a href="#">Javaa>li>
    <li><a href="#">PHPa>li>
    <li><a href="#">C++a>li>
    <li><a href="#">oraclea>li>
    <li><a href="#">sqla>li>
    ul>
div>

效果：