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

深藏阁楼爱情的钟 2022-07-15 08:00 192阅读 0赞

Bootstrap –表格菜单和胶囊式菜单 1.新建一个html / jsp ； 2.在新建的 html /jsp 中导入 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>`

效果：  
![表格菜单效果图][20161108232012906]

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>

效果：  
![水平胶囊菜单效果图][20161108232058986]

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>

效果：  
![垂直胶囊效果图][20161108232128323]

[20161108232012906]: /images/20220715/d01e154036384021b51b6763e6d4d3cd.png
[20161108232058986]: /images/20220715/1b37d79d2e544cc9ba8cd0bc23164dc8.png
[20161108232128323]: /images/20220715/b28add1c0a35459088520225f74e45ee.png