Bootstrap 导航 标题栏：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body style="margin:50px 0"> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="">01</a> </li> <li><a href="">02</a> </li> <li><a href="">03</a> </li> <li><a href="">04</a> </li> </ul> <ul class="nav nav-pills"> <li class="active"><a href="">01</a> </li> <li><a href="">02</a> </li> <li><a href="">03</a> </li> <li><a href="">04</a> </li> </ul> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="">01</a> </li> <li><a href="">02</a> </li> <li><a href="">03</a> </li> <li><a href="">04</a> </li> </ul> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="">01</a> </li> <li><a href="">02</a> </li> <li><a href="">03</a> </li> <li><a href="">04</a> </li> </ul> </div> <nav class='navbar navbar-default'>asdf</nav> <nav class='navbar navbar-inverse'>asdf</nav> <nav class='navbar navbar-default'> <div class="container"> <div class="navbar-head"> <a href="" class="navbar-brand">标题名称</a> </div> </div> </nav> <nav class='navbar navbar-default'> <div class="container"> <div class="navbar-head"> <a href="" class="navbar-brand">标题名称</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="">001</a> </li> <li><a href="">002</a> </li> <li class="disabled"><a href="">003</a> </li> <li><a href="">004</a> </li> </ul> </div> </nav> <nav class='navbar navbar-default navbar-fixed-top'> <div class="container"> <div class="navbar-head"> <a href="" class="navbar-brand">标题名称</a> </div> <form action="" class="navbar-form navbar-right"> <input type="text" class="form-control"> </form> <button class="btn btn-default navbar-btn">button</button> </div> </nav> <nav class='navbar navbar-default navbar-fixed-bottom'> <div class="container"> <div class="navbar-head"> <a href="" class="navbar-brand">标题名称</a> </div> <form action="" class="navbar-form navbar-right"> <input type="text" class="form-control"> </form> <button class="btn btn-default navbar-btn">button</button> </div> </nav> <nav class='navbar navbar-default navbar-static-tops'> <div class="container"> <div class="navbar-head"> <a href="" class="navbar-brand">标题名称</a> </div> <form action="" class="navbar-form navbar-right"> <input type="text" class="form-control"> </form> <button class="btn btn-default navbar-btn">button</button> </div> </nav> <p>001</p> <p>002</p> <p>003</p> <p>004</p> <p>005</p> <p>006</p> <p>007</p> <p>008</p> <p>009</p> <p>010</p> <p>011</p> <p>012</p> <p>013</p> <p>014</p> <p>015</p> <p>016</p> <p>017</p> <p>018</p> <p>019</p> </body> </html>
Bootstrap导航：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <title>b index</title> <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'> </head> <body style="margin:150px;"> <div class="bg-primary">导航1 .nav .nav-tabs</div> <ul class="nav nav-tabs"> <li class="active"><a>index</a></li> <li><a>index</a></li> <li><a>index</a></li> <li class="disabled"><a>index</a></li> <li class="nav-divider"></li> <li><a>index</a></li> <li><a>index</a></li> </ul> <div class="bg-primary">导航2 .nav .nav-pills</div> <ul class="nav nav-pills"> <li class="active"><a>index</a></li> <li><a>index</a></li> <li><a>index</a></li> <li class="disabled"><a>index</a></li> <li class="nav-divider"></li> <li><a>index</a></li> <li><a>index</a></li> </ul> <div class="bg-primary">导航3, .nav .nav-pills .nav-stacked, nav-divider只在这里有效果</div> <ul class="nav nav-pills nav-stacked"> <li class="active"><a>index</a></li> <li><a>index</a></li> <li><a>index</a></li> <li class="disabled"><a>index</a></li> <li class="nav-divider"></li> <li><a>index</a></li> <li><a>index</a></li> </ul> <div class="bg-primary">导航4 .nav .nav-tabs .nav-justified, 有nav-divider会有个灰块</div> <ul class="nav nav-tabs nav-justified"> <li class="active"><a>index</a></li> <li><a>index</a></li> <li><a>index</a></li> <li class="disabled"><a>index</a></li> <li class="nav-divider"></li> <li><a>index</a></li> <li><a>index</a></li> </ul> <div class="bg-primary">导航5 .nav .nav-pills .nav-justified, 有nav-divider会有个灰块</div> <ul class="nav nav-pills nav-justified"> <li class="active"><a>index</a></li> <li><a>index</a></li> <li><a>index</a></li> <li class="disabled"><a>index</a></li> <li class="nav-divider"></li> <li><a>index</a></li> <li><a>index</a></li> </ul> <div class="bg-primary">导航6 .nav .nav-tabs 二级导航 </div> <ul class="nav nav-tabs"> <li class="active"><a>index</a></li> <li><a>index</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a>21</a></li> <li><a>22</a></li> <li class="divider"><a>22</a></li> <li><a>22</a></li> </ul> </li> </ul> <div class="bg-primary">导航7 .nav .nav-pills 二级导航 </div> <ul class="nav nav-pills"> <li class="active"><a>index</a></li> <li><a>index</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a>21</a></li> <li><a>22</a></li> <li class="divider"><a>22</a></li> <li><a>22</a></li> </ul> </li> </ul> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="b/js/bootstrap.js"></script> </body> </html>