AdminLTE介紹

（1）AdminLTE是什么？

AdminLTE是一款建立在bootstrap和jquery之上的開源的模板主題工具，

（2）AdminLTE有什么特點？

提供一系列回應的、可重復使用的組件，并內置了多個模板頁面
自適應多種螢屏解析度，兼容PC和移動端
快速的創建一個回應式的Html5網站
AdminLTE 不但美觀，而且可以免去寫很大CSS與JS的作業量

（3）下載

官方原版
https://adminlte.io/
https://github.com/ColorlibHQ/AdminLTE
漢化版

目錄結構：

在這里插入圖片描述
只需要使用以下的四個檔案就行

大概樣式：

AdminLTE入門程式

（1）創建專案，引入css/js等靜態資源

在這里插入圖片描述

（2）pom.xml依賴

 <!--web基礎包 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

（3）創建index.jsp

復制模板檔案all-admin-datalist.html代碼到 index.jsp

注：需加入

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>

（4）報錯–>路徑

如果在加載訪問出現了404錯誤，可能是css/js/plugins參考路徑出現了錯誤

解決辦法：
使用專案路徑${path}替換掉 …/

…/plugins-----> ${path}/plugins
…/css-----> ${path}/css
…/img-----> ${path}/img

（5）對左側選單進行洗掉與修改

（1）為了頁面維護方便將【選單內容】移到left_menu.jsp中，再使用include引入當前頁面
（2）創建【企業管理】選單

index.jsp

    <!-- 導航側欄 -->
    <jsp:include page="left_menu.jsp"/>
    <!-- 導航側欄 /-->

效果展示：
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/193465.html

標籤：python

上一篇：【JavaScript】巧用思維導圖輕松學習JavaScript的后續來了

下一篇：兩種方法實作登錄回傳上一頁,對上一頁進行判斷,如果不是本網站頁面,就跳轉到個人中心或網站主頁,如果上一頁是本網站頁面就跳轉回到上一頁

AdminLTE的介紹與使用（詳細流程）-----前端框架

文章目錄