基本簡介
AdminLTE 是一款基於 jQuery 和 Bootstrap 的流行的后台管理界面框架，通過使用 AdminLET 框架提供的現成的組件可以大幅的提高后台管理界面的開發速度和規范性。
AdminLTE 目前的版本主要分為兩個版本：界面較為傳統規范的 2.X 版本以及使用了較新的 Bootstrap4 的界面較為現代的 3.X 版本（本篇使用的是 AdminLTE 2.x 版本）。
AdminLTE 官網地址：https://adminlte.io/
AdminLTE GitHub：https://github.com/ColorlibHQ/AdminLTE
AdminLTE 2.x 界面預覽：https://adminlte.io/themes/AdminLTE/index2.html
AdminLTE 3.x 界面預覽：https://adminlte.io/themes/dev/AdminLTE/index.html
AdminLTE 2.x 中文文檔：http://theme.skyheng.com/roncoo-adminLTE/documentation/index.html#introduction
目錄結構
bower_components：存放了這個框架依賴的其他框架，如bootstrap，jquery、字體樣式、圖標樣式等
build： 編譯前的源文件目錄
dist：編譯后的靜態資源目錄
pages：目錄下是一些示例頁面
plugins：目錄存放依賴的插件
starter.html ：是 AdminLTE 建議用來作為起點的參考示例
index.html：是AdminLTE中比較完善的展示品，用於參考、借鑒
......
常用的類
布局相關：
.wrapper包住了body下的所有代碼
.main-header里是網站的logo和導航欄的代碼
.main-sidebar里是用戶面板和側邊欄菜單的代碼
.content-wrapper里是頁面的頁面和內容區域的代碼
.main-footer里是頁腳的代碼
.control-sidebar里是頁面右側側邊欄區域的代碼
布局選項：
fixed：固定
layout-boxed：盒子布局
layout-top-nav：頂部隱藏
sidebar-collapse：側邊欄隱藏
sidebar-mini：側邊欄隱藏時有小圖標
皮膚選項：
skin-blue：藍色
skin-black：黑色
skin-purple：紫色
skin-yellow：黃色
skin-red：紅色
skin-green：綠色
精簡使用
PS：這里的 pages 目錄里面存放的為各種已經設置好的常規組件和頁面可供選用
常用頁面
系統首頁：
<!DOCTYPE html> <!-- This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Starter</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. We have chosen the skin-blue for this starter page. However, you can choose any other skin. Make sure you apply the skin class to the body tag so the changes take effect. --> <link rel="stylesheet" href="dist/css/skins/skin-purple.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> </head> <!-- BODY TAG OPTIONS: ================= Apply one or more of the following classes to get the desired effect |---------------------------------------------------------| | SKINS | skin-blue | | | skin-black | | | skin-purple | | | skin-yellow | | | skin-red | | | skin-green | |---------------------------------------------------------| |LAYOUT OPTIONS | fixed | | | layout-boxed | | | layout-top-nav | | | sidebar-collapse | | | sidebar-mini | |---------------------------------------------------------| --> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- Main Header --> <header class="main-header"> <!-- Logo --> <a href="./index.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>A</b>LT</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <!-- Header Navbar --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> </a> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <!-- /.messages-menu --> <!-- Notifications Menu --> <!-- Tasks Menu --> <!-- User Account Menu --> <li class="dropdown user user-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- The user image in the navbar--> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. --> <span class="hidden-xs">Admin</span> </a> <ul class="dropdown-menu"> <!-- The user image in the menu --> <li class="user-header" style="height: auto;"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <!-- <p></p> --> </li> <!-- Menu Body --> <li class="user-body"> <div class="row"> <div class="col-xs-12 text-center"> <p style="padding-bottom:0px !important;margin-bottom: -1px;"> 您的姓名：Admin<br> 您的角色：超級管理員<br> 您的地址：127.0.0.1<br> </p> </div> </div> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <a href="./update-password.html" class="btn btn-default btn-flat">修改密碼</a> </div> <div class="pull-right"> <a href="/" onclick="return confirm('您確定要退出系統嗎？');" class="btn btn-default btn-flat">退出登陸</a> </div> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Admin</p> <!-- Status --> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- search form (Optional) --> <!-- /.search form --> <!-- Sidebar Menu --> <ul class="sidebar-menu" data-widget="tree"> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="./index.html"><i class="fa fa-dashboard"></i> <span>啟動頁面</span></a></li> <li class="treeview"> <a href="#"><i class="fa fa-newspaper-o"></i> <span>文章管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./add.html"> <i class="fa fa-plus"></i> 新增文章 </a> </li> <li> <a href="./list.html"> <i class="fa fa-list"></i> 文章列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"><i class="fa fa-user-circle"></i> <span>賬戶中心</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./update-password.html"> <i class="fa fa-unlock"></i> 密碼修改 </a> </li> <li> <a href="/" onclick="return confirm('您確定要退出系統嗎？');"> <i class="fa fa-sign-out"></i> 退出系統 </a> </li> </ul> </li> </ul> <!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper" style="min-height: 305px;"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> 啟動頁面 <small>首頁面板</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i>系統</a></li> <li class="active">首頁</li> </ol> </section> <!-- Main content --> <section class="content container-fluid"> <div class="row"> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-aqua"> <div class="inner"> <h3>4</h3> <p>記錄總計</p> </div> <div class="icon"> <i class="ion ion-bag"></i> </div> <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-green"> <div class="inner"> <h3>0</h3> <p>本月新增</p> </div> <div class="icon"> <i class="ion ion-stats-bars"></i> </div> <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-yellow"> <div class="inner"> <h3>0</h3> <p>本周新增</p> </div> <div class="icon"> <i class="ion ion-person-add"></i> </div> <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-red"> <div class="inner"> <h3>0</h3> <p>本天新增</p> </div> <div class="icon"> <i class="ion ion-pie-graph"></i> </div> <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div> </div> <!-- ./col --> </div> <div class="row"> <div class="col-lg-12 col-xs-12"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">系統信息</h3> </div> <div class="box-body table-responsive no-padding"> <table class="table table-bordered"> <tbody> <tr> <th width="15%">系統版本</th> <td width="35%">V1.2</td> <th width="15%">授權信息</th> <td> <span class="label bg-blue">已授權</span> </td> </tr> <tr> <th>系統版本</th> <td>Windows Server 2012 R2</td> <th>框架版本</th> <td> <a href="https://www.dbshop.net/" target="_blank">.NET Framework 4.7.2</a> </td> </tr> <tr> <th>數據存儲</th> <td>SQL Server 2016</td> <th>發行日期</th> <td> 2021年04月15日 </td> </tr> <tr> <th>發行備注</th> <td colspan="3"> <dl> <dt>V1.2</dt> <dd style="margin-left: 20px;">實現XXX功能</dd> <dt>V1.1</dt> <dd style="margin-left: 20px;">修改XXX頁面</dd> <dt>V1.0</dt> <dd style="margin-left: 20px;">新增XXX頁面</dd> </dl> </td> </tr> </tbody> </table> </div> </div> </div> </div> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> <!-- Main Footer --> <footer class="main-footer"> <!-- To the right --> <div class="pull-right hidden-xs"> <!--頁腳右側區域--> </div> <!-- Default to the left --> <strong>Copyright © 2021 <a href="#">Company</a>.</strong> All rights reserved. </footer> <!-- Control Sidebar --> <!-- /.control-sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- REQUIRED JS SCRIPTS --> <!-- jQuery 3 --> <script src="bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- AdminLTE App --> <script src="dist/js/adminlte.min.js"></script> <!-- Optionally, you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experience. --> </body> </html>
新增頁面：
<!DOCTYPE html> <!-- This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Starter</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. We have chosen the skin-blue for this starter page. However, you can choose any other skin. Make sure you apply the skin class to the body tag so the changes take effect. --> <link rel="stylesheet" href="dist/css/skins/skin-purple.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> <style> /* 處理數據頁面面包屑問題開始 */ .content-header > .breadcrumb-left { float:left !important; left: 10px !important; background: transparent; margin-top: 0; margin-bottom: 0; font-size: 12px; padding: 7px 5px; position: absolute; top: 15px; right: 10px; border-radius: 2px; width: 25% !important; } .fa-dashboard:before, .fa-tachometer:before { margin-right: 5px !important; } .breadcrumb-left>li { display: inline-block; } .breadcrumb-left>li+li:before { padding: 0 5px; color: #ccc; content: '>\00a0'; } .content-header>.breadcrumb-left>li>a { color: #444; text-decoration: none; display: inline-block; } .content-header > .breadcrumb-left , .content-header > h1.pull-right { padding-bottom: 5px !important; } /* 處理數據頁面面包屑問題結束 */ /* 隱藏顯示輔助類開始 */ .my-hide { display: none; } .my-show { display: block; } /* 隱藏顯示輔助類結束 */ </style> </head> <!-- BODY TAG OPTIONS: ================= Apply one or more of the following classes to get the desired effect |---------------------------------------------------------| | SKINS | skin-blue | | | skin-black | | | skin-purple | | | skin-yellow | | | skin-red | | | skin-green | |---------------------------------------------------------| |LAYOUT OPTIONS | fixed | | | layout-boxed | | | layout-top-nav | | | sidebar-collapse | | | sidebar-mini | |---------------------------------------------------------| --> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- Main Header --> <header class="main-header"> <!-- Logo --> <a href="./index.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>A</b>LT</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <!-- Header Navbar --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> </a> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <!-- /.messages-menu --> <!-- Notifications Menu --> <!-- Tasks Menu --> <!-- User Account Menu --> <li class="dropdown user user-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- The user image in the navbar--> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. --> <span class="hidden-xs">Admin</span> </a> <ul class="dropdown-menu"> <!-- The user image in the menu --> <li class="user-header" style="height: auto;"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <!-- <p></p> --> </li> <!-- Menu Body --> <li class="user-body"> <div class="row"> <div class="col-xs-12 text-center"> <p style="padding-bottom:0px !important;margin-bottom: -1px;"> 您的姓名：Admin<br> 您的角色：超級管理員<br> 您的地址：127.0.0.1<br> </p> </div> </div> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <a href="./update-password.html" class="btn btn-default btn-flat">修改密碼</a> </div> <div class="pull-right"> <a href="/" onclick="return confirm('您確定要退出系統嗎？');" class="btn btn-default btn-flat">退出登陸</a> </div> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Admin</p> <!-- Status --> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- search form (Optional) --> <!-- /.search form --> <!-- Sidebar Menu --> <ul class="sidebar-menu" data-widget="tree"> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="./index.html"><i class="fa fa-dashboard"></i> <span>啟動頁面</span></a></li> <li class="treeview"> <a href="#"><i class="fa fa-newspaper-o"></i> <span>文章管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./add.html"> <i class="fa fa-plus"></i> 新增文章 </a> </li> <li> <a href="./list.html"> <i class="fa fa-list"></i> 文章列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"><i class="fa fa-user-circle"></i> <span>賬戶中心</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./update-password.html"> <i class="fa fa-unlock"></i> 密碼修改 </a> </li> <li> <a href="/" onclick="return confirm('您確定要退出系統嗎？');"> <i class="fa fa-sign-out"></i> 退出系統 </a> </li> </ul> </li> </ul> <!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper" style="min-height: 557px;"> <form action="/" method="post" name="user-form" enctype="multipart/form-data" class="form-horizontal"> <section class="content-header" style="padding-bottom: 10px !important;"> <ol class="breadcrumb-left" style="overflow: hidden;"> <li><a href="./index.html"><i class="fa fa-dashboard">首頁</i></a></li> <li><a href="./list.html">文章列表</a></li> <li class="active">添加文章</li> </ol> <h1 class="pull-right"> <a href="./list.html" class="btn btn-default btn-sm"><i class="fa fa-arrow-left"></i>返回文章列表</a> <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-check"></i>保存文章信息</button> <a href="https://docs.loongdomsoft.com/dbshop/user/#客戶添加" target="_blank" class="btn btn-info btn-sm"><i class="fa fa-info-circle"></i> 查看幫助</a> </h1> </section> <section class="content"> <div class="row"> <div class="col-md-12"> <div class="nav-tabs-custom"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab_1" data-toggle="tab">基本信息</a></li> <li class=""><a href="#tab_2" data-toggle="tab">SEO 優化</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_1"> <div class="box-body"> <!--文章標題--> <div class="form-group"> <label class="col-sm-2 control-label" for="nameInputId"> 文章標題 <span class="text-danger"> *</span> </label> <div class="col-sm-4"> <input id="nameInputId" type="text" name="name" class="form-control"> </div> <span class="col-sm-6 text-danger" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--是否啟用--> <div class="form-group"> <label class="col-sm-2 control-label" for="statusInputId"> 是否啟用<span class="text-danger"> *</span> </label> <div class="col-sm-4"> <select id="statusInputId" name="status" class="form-control"> <option value="1">啟用</option> <option value="2">不啟用</option> </select> </div> <span class="col-sm-6 text-danger" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文章作者--> <div class="form-group"> <label class="col-sm-2 control-label" for="nameInputId"> 文章作者 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-4"> <input id="authorInputId" type="text" name="author" class="form-control"> </div> <span class="col-sm-6 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文章詳情--> <div class="form-group"> <label class="col-sm-2 control-label" for="contentTextAreaId"> 文章詳情 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-8"> <textarea id="contentTextAreaId" class="form-control" rows="5" cols="35"></textarea> </div> <span class="col-sm-2 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> </div> </div> <div class="tab-pane" id="tab_2"> <div class="box-body"> <!--文檔標題--> <div class="form-group"> <label class="col-sm-2 control-label" for="documentTitleInputId"> 文檔標題 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-4"> <input id="documentTitleInputId" type="text" name="document_title" class="form-control"> </div> <span class="col-sm-6 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文檔關鍵詞--> <div class="form-group"> <label class="col-sm-2 control-label" for="documentKeywordsInputId"> 文檔關鍵詞 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-4"> <input id="documentKeywordsInputId" type="text" name="document_keywords" class="form-control"> </div> <span class="col-sm-6 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文檔作者--> <div class="form-group"> <label class="col-sm-2 control-label" for="documentDescriptionInputId"> 文檔作者 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-4"> <textarea id="documentDescriptionInputId" class="form-control" rows="5" cols="35"></textarea> </div> <span class="col-sm-6 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文檔描述--> </div> </div> </div> </div> </div> </div> </section> </form> </div> <!-- /.content-wrapper --> <!-- Main Footer --> <footer class="main-footer"> <!-- To the right --> <div class="pull-right hidden-xs"> <!--頁腳右側區域--> </div> <!-- Default to the left --> <strong>Copyright © 2021 <a href="#">Company</a>.</strong> All rights reserved. </footer> <!-- Control Sidebar --> <!-- /.control-sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- REQUIRED JS SCRIPTS --> <!-- jQuery 3 --> <script src="bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- AdminLTE App --> <script src="dist/js/adminlte.min.js"></script> <!-- Optionally, you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experience. --> </body> </html>
列表頁面：
<!DOCTYPE html> <!-- This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Starter</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. We have chosen the skin-blue for this starter page. However, you can choose any other skin. Make sure you apply the skin class to the body tag so the changes take effect. --> <link rel="stylesheet" href="dist/css/skins/skin-purple.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> <style> /* 處理數據頁面面包屑問題開始 */ .content-header>.breadcrumb-left { float: left !important; left: 10px !important; background: transparent; margin-top: 0; margin-bottom: 0; font-size: 12px; padding: 7px 5px; position: absolute; top: 15px; right: 10px; border-radius: 2px; width: 25% !important; } .fa-dashboard:before, .fa-tachometer:before { margin-right: 5px !important; } .breadcrumb-left>li { display: inline-block; } .breadcrumb-left>li+li:before { padding: 0 5px; color: #ccc; content: '>\00a0'; } .content-header>.breadcrumb-left>li>a { color: #444; text-decoration: none; display: inline-block; } .content-header>.breadcrumb-left, .content-header>h1.pull-right { padding-bottom: 5px !important; } /* 處理數據頁面面包屑問題結束 */ /* 隱藏顯示輔助類開始 */ .my-hide { display: none; } .my-show { display: block; } /* 隱藏顯示輔助類結束 */ /* 表頭背景色區域開始 */ .bg-thead { background-color: #d2d6de !important; } /* 表頭背景色區域結束 */ </style> </head> <!-- BODY TAG OPTIONS: ================= Apply one or more of the following classes to get the desired effect |---------------------------------------------------------| | SKINS | skin-blue | | | skin-black | | | skin-purple | | | skin-yellow | | | skin-red | | | skin-green | |---------------------------------------------------------| |LAYOUT OPTIONS | fixed | | | layout-boxed | | | layout-top-nav | | | sidebar-collapse | | | sidebar-mini | |---------------------------------------------------------| --> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- Main Header --> <header class="main-header"> <!-- Logo --> <a href="./index.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>A</b>LT</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <!-- Header Navbar --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> </a> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <!-- /.messages-menu --> <!-- Notifications Menu --> <!-- Tasks Menu --> <!-- User Account Menu --> <li class="dropdown user user-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- The user image in the navbar--> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. --> <span class="hidden-xs">Admin</span> </a> <ul class="dropdown-menu"> <!-- The user image in the menu --> <li class="user-header" style="height: auto;"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <!-- <p></p> --> </li> <!-- Menu Body --> <li class="user-body"> <div class="row"> <div class="col-xs-12 text-center"> <p style="padding-bottom:0px !important;margin-bottom: -1px;"> 您的姓名：Admin<br> 您的角色：超級管理員<br> 您的地址：127.0.0.1<br> </p> </div> </div> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <a href="./update-password.html" class="btn btn-default btn-flat">修改密碼</a> </div> <div class="pull-right"> <a href="/" onclick="return confirm('您確定要退出系統嗎？');" class="btn btn-default btn-flat">退出登陸</a> </div> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Admin</p> <!-- Status --> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- search form (Optional) --> <!-- /.search form --> <!-- Sidebar Menu --> <ul class="sidebar-menu" data-widget="tree"> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="./index.html"><i class="fa fa-dashboard"></i> <span>啟動頁面</span></a></li> <li class="treeview"> <a href="#"><i class="fa fa-newspaper-o"></i> <span>文章管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./add.html"> <i class="fa fa-plus"></i> 新增文章 </a> </li> <li> <a href="./list.html"> <i class="fa fa-list"></i> 文章列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"><i class="fa fa-user-circle"></i> <span>賬戶中心</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./update-password.html"> <i class="fa fa-unlock"></i> 密碼修改 </a> </li> <li> <a href="/" onclick="return confirm('您確定要退出系統嗎？');"> <i class="fa fa-sign-out"></i> 退出系統 </a> </li> </ul> </li> </ul> <!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper" style="min-height: 501px;"> <section class="content-header"> <h1> 文章管理 <small>文章列表</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i>首頁</a></li> <li class="active">文章列表</li> </ol> </section> <section class="content"> <div class="row"> <div class="col-md-12 col-xs-12"> <div class="box"> <div class="box-body"> <div style="clear:both;margin-bottom: 10px;"> <form action="/" method="POST" style="float:left;margin-bottom: 5px;"> <table> <tr> <td><input type="text" class="form-control" placeholder="文章編號"></td> <td><input type="text" class="form-control" placeholder="文章標題"></td> <td> <input type="reset" value="重置" class="btn btn-primary"> <input type="submit" value="查詢" class="btn btn-primary"> </td> </tr> </table> </form> <div style="float: right;"> <a href="#" class="btn btn-primary"><i class="fa fa-plus"></i> 添加文章</a> </div> </div> <table class="table table-bordered table-responsive table-hover" style="margin-top: 45px;"> <thead> <tr class="active"> <th>文章編號</th> <th>文章標題</th> <th>文章分類</th> <th>啟用狀態</th> <th>文章排序</th> <th>添加時間</th> <th>可選操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>測試文章標題</td> <td>公司新聞</td> <td>啟用</td> <td>1</td> <td>2021年5月19日 下午5:00</td> <td> <a href="#">詳情 </a> <a href="#">編輯 </a> <a href="/" onclick="return confirm('您確定要刪除本條記錄嗎？');">刪除 </a> </td> </tr> <tr> <td>1</td> <td>測試文章標題</td> <td>公司新聞</td> <td>啟用</td> <td>1</td> <td>2021年5月19日 下午5:00</td> <td> <a href="#">詳情 </a> <a href="#">編輯 </a> <a href="/" onclick="return confirm('您確定要刪除本條記錄嗎？');">刪除 </a> </td> </tr> <tr> <td>1</td> <td>測試文章標題</td> <td>公司新聞</td> <td>啟用</td> <td>1</td> <td>2021年5月19日 下午5:00</td> <td> <a href="#">詳情 </a> <a href="#">編輯 </a> <a href="/" onclick="return confirm('您確定要刪除本條記錄嗎？');">刪除 </a> </td> </tr> </tbody> </table> </div> <div class="box-footer text-center clearfix"> <ul class="pagination no-margin "> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </div> </div> </div> </div> </section> </div> <!-- /.content-wrapper --> <!-- Main Footer --> <footer class="main-footer"> <!-- To the right --> <div class="pull-right hidden-xs"> <!--頁腳右側區域--> </div> <!-- Default to the left --> <strong>Copyright © 2021 <a href="#">Company</a>.</strong> All rights reserved. </footer> <!-- Control Sidebar --> <!-- /.control-sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- REQUIRED JS SCRIPTS --> <!-- jQuery 3 --> <script src="bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- AdminLTE App --> <script src="dist/js/adminlte.min.js"></script> <!-- Optionally, you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experience. --> </body> </html>
更新頁面：
<!DOCTYPE html> <!-- This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Starter</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. We have chosen the skin-blue for this starter page. However, you can choose any other skin. Make sure you apply the skin class to the body tag so the changes take effect. --> <link rel="stylesheet" href="dist/css/skins/skin-purple.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> <style> /* 處理數據頁面面包屑問題開始 */ .content-header > .breadcrumb-left { float:left !important; left: 10px !important; background: transparent; margin-top: 0; margin-bottom: 0; font-size: 12px; padding: 7px 5px; position: absolute; top: 15px; right: 10px; border-radius: 2px; width: 25% !important; } .fa-dashboard:before, .fa-tachometer:before { margin-right: 5px !important; } .breadcrumb-left>li { display: inline-block; } .breadcrumb-left>li+li:before { padding: 0 5px; color: #ccc; content: '>\00a0'; } .content-header>.breadcrumb-left>li>a { color: #444; text-decoration: none; display: inline-block; } .content-header > .breadcrumb-left , .content-header > h1.pull-right { padding-bottom: 5px !important; } /* 處理數據頁面面包屑問題結束 */ /* 隱藏顯示輔助類開始 */ .my-hide { display: none; } .my-show { display: block; } /* 隱藏顯示輔助類結束 */ </style> </head> <!-- BODY TAG OPTIONS: ================= Apply one or more of the following classes to get the desired effect |---------------------------------------------------------| | SKINS | skin-blue | | | skin-black | | | skin-purple | | | skin-yellow | | | skin-red | | | skin-green | |---------------------------------------------------------| |LAYOUT OPTIONS | fixed | | | layout-boxed | | | layout-top-nav | | | sidebar-collapse | | | sidebar-mini | |---------------------------------------------------------| --> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- Main Header --> <header class="main-header"> <!-- Logo --> <a href="./index.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>A</b>LT</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <!-- Header Navbar --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> </a> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <!-- /.messages-menu --> <!-- Notifications Menu --> <!-- Tasks Menu --> <!-- User Account Menu --> <li class="dropdown user user-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- The user image in the navbar--> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. --> <span class="hidden-xs">Admin</span> </a> <ul class="dropdown-menu"> <!-- The user image in the menu --> <li class="user-header" style="height: auto;"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <!-- <p></p> --> </li> <!-- Menu Body --> <li class="user-body"> <div class="row"> <div class="col-xs-12 text-center"> <p style="padding-bottom:0px !important;margin-bottom: -1px;"> 您的姓名：Admin<br> 您的角色：超級管理員<br> 您的地址：127.0.0.1<br> </p> </div> </div> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <a href="./update-password.html" class="btn btn-default btn-flat">修改密碼</a> </div> <div class="pull-right"> <a href="/" onclick="return confirm('您確定要退出系統嗎？');" class="btn btn-default btn-flat">退出登陸</a> </div> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Admin</p> <!-- Status --> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- search form (Optional) --> <!-- /.search form --> <!-- Sidebar Menu --> <ul class="sidebar-menu" data-widget="tree"> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="./index.html"><i class="fa fa-dashboard"></i> <span>啟動頁面</span></a></li> <li class="treeview"> <a href="#"><i class="fa fa-newspaper-o"></i> <span>文章管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./add.html"> <i class="fa fa-plus"></i> 新增文章 </a> </li> <li> <a href="./list.html"> <i class="fa fa-list"></i> 文章列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"><i class="fa fa-user-circle"></i> <span>賬戶中心</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li> <a href="./update-password.html"> <i class="fa fa-unlock"></i> 密碼修改 </a> </li> <li> <a href="/" onclick="return confirm('您確定要退出系統嗎？');"> <i class="fa fa-sign-out"></i> 退出系統 </a> </li> </ul> </li> </ul> <!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper" style="min-height: 557px;"> <form action="/" method="post" name="user-form" enctype="multipart/form-data" class="form-horizontal"> <section class="content-header" style="padding-bottom: 10px !important;"> <ol class="breadcrumb-left" style="overflow: hidden;"> <li><a href="./index.html"><i class="fa fa-dashboard">首頁</i></a></li> <li><a href="#">賬戶中心</a></li> <li class="active">更新密碼</li> </ol> <h1 class="pull-right"> <a href="./list.html" class="btn btn-default btn-sm"><i class="fa fa-arrow-left"></i>返回啟動台</a> <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-check"></i>更新密碼</button> <a href="https://docs.loongdomsoft.com/dbshop/user/#客戶添加" target="_blank" class="btn btn-info btn-sm"><i class="fa fa-info-circle"></i> 查看幫助</a> </h1> </section> <section class="content"> <div class="row"> <div class="col-md-12"> <div class="nav-tabs-custom"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab_1" data-toggle="tab">更新密碼</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_1"> <div class="box-body"> <!--原始密碼--> <div class="form-group"> <label class="col-sm-2 control-label" for="newPasswordInputId"> 新設密碼 <span class="text-danger"> *</span> </label> <div class="col-sm-4"> <input id="newPasswordInputId" type="password" name="newPassword" class="form-control"> </div> <span class="col-sm-6 text-danger" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--新的密碼--> <div class="form-group"> <label class="col-sm-2 control-label" for="oldPasswordInputId"> 原始密碼 <span class="text-danger"> *</span> </label> <div class="col-sm-4"> <input id="oldPasswordInputId" type="password" name="oldPassword" class="form-control"> </div> <span class="col-sm-6 text-danger" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--確認密碼--> <div class="form-group"> <label class="col-sm-2 control-label" for="confirmPasswordInputId"> 確認密碼 <span class="text-danger"> *</span> </label> <div class="col-sm-4"> <input id="confirmPasswordInputId" type="password" name="confirmPassword" class="form-control"> </div> <span class="col-sm-6 text-danger" style="padding-left:0px;line-height:34px;">必填！</span> </div> </div> </div> <div class="tab-pane" id="tab_2"> <div class="box-body"> <!--文檔標題--> <div class="form-group"> <label class="col-sm-2 control-label" for="documentTitleInputId"> 文檔標題 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-4"> <input id="documentTitleInputId" type="text" name="document_title" class="form-control"> </div> <span class="col-sm-6 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文檔關鍵詞--> <div class="form-group"> <label class="col-sm-2 control-label" for="documentKeywordsInputId"> 文檔關鍵詞 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-4"> <input id="documentKeywordsInputId" type="text" name="document_keywords" class="form-control"> </div> <span class="col-sm-6 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文檔作者--> <div class="form-group"> <label class="col-sm-2 control-label" for="documentDescriptionInputId"> 文檔作者 <span class="text-danger my-hide"> *</span> </label> <div class="col-sm-4"> <textarea id="documentDescriptionInputId" class="form-control" rows="5" cols="35"></textarea> </div> <span class="col-sm-6 text-danger my-hide" style="padding-left:0px;line-height:34px;">必填！</span> </div> <!--文檔描述--> </div> </div> </div> </div> </div> </div> </section> </form> </div> <!-- /.content-wrapper --> <!-- Main Footer --> <footer class="main-footer"> <!-- To the right --> <div class="pull-right hidden-xs"> <!--頁腳右側區域--> </div> <!-- Default to the left --> <strong>Copyright © 2021 <a href="#">Company</a>.</strong> All rights reserved. </footer> <!-- Control Sidebar --> <!-- /.control-sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- REQUIRED JS SCRIPTS --> <!-- jQuery 3 --> <script src="bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- AdminLTE App --> <script src="dist/js/adminlte.min.js"></script> <!-- Optionally, you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experience. --> </body> </html>
登陸頁面：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Log in</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="./bower_components/Ionicons/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="./dist/css/AdminLTE.min.css"> <!-- iCheck --> <link rel="stylesheet" href="./plugins/iCheck/square/blue.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> </head> <body class="hold-transition login-page"> <div class="login-box"> <!-- /.login-logo --> <div class="login-box-body"> <div class="text-center" style="font-size: 28px;padding-bottom: 10px;"> <b>后台管理系統</b> </div> <p class="text-danger text-center">這里是登陸錯誤的提示信息</p> <form action="#" method="post"> <div class="form-group has-feedback"> <input type="text" class="form-control" placeholder="您的賬號"> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="您的密碼"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="form-group has-feedback clearfix"> <input type="password" class="form-control" style="width: 70%;" placeholder="驗 證 碼"> <img src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.8/assets/img/aliyun-5.jpg" alt="" style="position: absolute;top: 0px;right: 0px;width: 90px;height: 34px;border: 1px solid #D2D6DE;"> </div> <div class="row"> <div class="col-md-6"> <input type="reset" class="btn btn-default btn-block btn-flat" value="重置" /> </div> <div class="col-md-6"> <input type="submit" class="btn btn-default btn-block btn-flat" value="登陸" /> </div> <!-- /.col --> </div> </form> </div> <!-- /.login-box-body --> </div> <!-- /.login-box --> <!-- jQuery 3 --> <script src="./bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- iCheck --> <script src="./plugins/iCheck/icheck.min.js"></script> <script> $(function () { $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' /* optional */ }); }); </script> </body> </html>
消息頁面：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Log in</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="./bower_components/Ionicons/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="./dist/css/AdminLTE.min.css"> <!-- iCheck --> <link rel="stylesheet" href="./plugins/iCheck/square/blue.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> </head> <body class="hold-transition login-page"> <div class="login-box"> <!-- /.login-logo --> <div class="login-box-body"> <div class="text-center" style="font-size: 28px;padding-bottom: 10px;"> <b>提示信息</b> </div> <div style="display: flex;flex-direction: row;justify-content:center;border-top: 1px solid #D5D5D5;border-bottom: 1px solid #D5D5D5;padding-top: 10px;padding-bottom: 10px;"> <ol class="text-danger" style=" margin: 0px;padding: 0px;"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> </div> <div class="text-center" style="margin-top: 10px;"> <a href="#" class="btn btn-primary">返回</a> </div> </div> <!-- /.login-box-body --> </div> <!-- /.login-box --> <!-- jQuery 3 --> <script src="./bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- iCheck --> <script src="./plugins/iCheck/icheck.min.js"></script> <script> $(function () { $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' /* optional */ }); }); </script> </body> </html>
界面截圖
打包下載
百度雲：鏈接: https://pan.baidu.com/s/1XvhNLmnk2X3n1aDo-Y0SMg 密碼: k8ei