Day31專案saas-export專案-AdminLTE介紹與入門

2020-10-25 13:00:37

AdminLTE介紹

  • (1)AdminLTE是什麼?
    AdminLTE是一款建立在bootstrap和jquery之上的開源的模板主題工具
  • (2)AdminLTE有什麼特點?
    》》提供一系列響應的、可重複使用的元件, 並內建了多個模板頁面
    》》自適應多種螢幕解析度,相容PC和行動端
    》》快速的建立一個響應式的Html5網站
    》》AdminLTE 不但美觀, 而且可以免去寫很大CSS與JS的工作量

AdminLTE入門程式

  • (1)官方原版
    https://adminlte.io/
    https://github.com/ColorlibHQ/AdminLTE
  • (2)漢化版
    在這裡插入圖片描述
    在這裡插入圖片描述
    在這裡插入圖片描述

AdminLTE入門程式

  • (1)建立專案,引入css/js等靜態資源
  • (2)建立index.jsp
  • (3)複製模板檔案程式碼到 index.jsp
    all-admin-datalist.html
  • (4)使用專案路徑${path}替換掉 …/
    …/plugins ${path}/plugins
    …/css ${path}/css
    …/img ${path}/img

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>

在這裡插入圖片描述

對左側選單進行刪除與修改

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

index.jsp

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

left_menu.jsp

在這裡插入圖片描述

  • 保留一個li標籤,並刪除,只留兩個子項。
    在這裡插入圖片描述