第四篇 -- 寫一個導航頁面

阿新 • • 發佈：2021-08-02

效果圖

bootstrap(3.3.7) + sb-admin-2(3.3.7+1) + metisMenu(1.1.3)

下載css和js檔案

1. bootstrap3.3.7，上節下載過，這節就不重複了。

2. metisMenu1.1.3

下載地址：https://github.com/onokumus/metismenu

3.sb-admin-2 3.3.7+1

下載地址：https://startbootstrap.com/theme/sb-admin-2

找版本步驟和2相同，下載

實現導航欄

1. 按照第一篇新建一個Hello World程式，修改入口函式為

    @RequestMapping(value = "/")
    public String ShowNav() 
    {
        return "page1";
    }

2. 在src/main/webapp/WEB-INF/views下建一個page1.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    import 
="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Page1</title>
    <!-- 使用bootstrap框架，美化登入介面 -->
    <link href="${pageContext.request.contextPath}/resources/bootstrap3_3_7/dist/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/resources/bootstrap3_3_7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 導航欄  -->
    <link href="${pageContext.request.contextPath}/resources/metismenu1_1_3/dist/metisMenu.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/resources/sb_admin2_3_3_7/dist/css/sb-admin-2.css" rel="stylesheet">
    
<body>
    <div id="wrapper">
        <%@ include file="navigation.jsp"%>
    
        <div id="page-wrapper">
        </div><!-- /#page-wrapper -->
    </div><!-- /#wrapper -->
</body>
</head>
</html>

View Code

3. 在src/main/webapp/WEB-INF/views下建一個navigation.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    import="java.util.*" pageEncoding="UTF-8"%>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/loginpage/page1/" style="font-size:22px;">歡迎來到湖北省</a>
    </div>

    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
            <ul class="nav" id="side-menu" style="font-size:16px">
                <li>
                    <a href="#"><i class="fa fa-home fa-fw"></i> 湖北省</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-list-alt fa-fw"></i> 武漢市<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">   黃陂區</a>
                        </li>
                        <li>
                            <a href="#"> 江夏區</a>
                        </li>
                        <li>
                            <a href="#"> 洪山區</a>     
                        </li>      
                    </ul>        
                    <!-- /.nav-second-level -->
                </li>
                <li>
                    <a href="#"><i class="fa fa-folder-open-o fa-fw"></i> 黃岡市<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"> 團風縣</a>
                        </li>
                        <li>
                            <a href="#"> 浠水縣</a>
                        </li>
                        <li>
                            <a href="#"> 紅安縣</a>
                        </li>
                    </ul>
                    <!-- /.nav-second-level -->
                </li>
                <li>
                    <a href="#"><i class="fa fa-users fa-fw"></i> 宜昌市<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"> 遠安縣</a>
                        </li>
                        <li>
                            <a href="#"> 興山縣</a>
                        </li>
                    </ul>
                    <!-- /.nav-second-level -->
                </li>

            </ul>
        </div>
        <!-- /.sidebar-collapse -->
        
    </div>
    <!-- /.navbar-static-side -->
</nav>

View Code

4. 將下載好的\bootstrap-3.3.7\dist拷貝到工程的src/main/webapp\resources\bootstrap3_3_7\dist

將下載好的\metismenu-1.1.3\dist拷貝到工程的src/main/webapp\resources\metismenu1_1_3\dist

將下載好的\startbootstrap-sb-admin-2-3.3.7-1\dist拷貝到工程的src/main/webapp\resources\sb_admin2_3_3_7\dist

5. 執行程式，實現效果圖。