AdminLTE的使用

浅浅的花香味﹌ 2022-03-16 05:14 248阅读 0赞

1.AdminLTE的必要配置文件

<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>AdminLTE 2 | Starter</title>
      
      <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">
      
      <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
      
      <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
      
      <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
      
      <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    
      
      
      
    
      
      <link rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    </head>

2.自定义主题样式

（1）在body中设置class。

skin-blue：主题颜色，如果引入了\_all-skins.min.css，有很多颜色可以选择，如左图，设置为skin-blue默认就为右图的主题样式。

![1019802-20161026173118328-1635486192.png][]        ![1019802-20161026173228156-2029840437.png][]

sidebar-mini：在AdminLTE.css中可以找到。

![1019802-20161026173504750-1414502334.png][]   ![1019802-20161026173427671-1544935100.png][]

（2）wrapper设置: AdminLTE.css

header设置：放在header标签里。

![复制代码][copycode.gif]

<!- - Logo - ->
    <a href="index2.html" class="logo"> 
    
      <span class="logo-mini">
         <img alt="" src="${ctx}/assets/img/logo.png" width="40px" height="40px">
      </span>
      <span class="logo-lg">xxx后台管理系统</span>
    </a>
    <!- - Header Navbar - ->
    <nav class="navbar navbar-static-top" role="navigation">
         
         <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
         </a>
       
       <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
          
          <li class="dropdown user user-menu">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="${ctx}/assets/img/user.png" class="user-image" alt="User Image">
                  <span class="hidden-xs">${user.name}</span>
               </a>
               <ul class="dropdown-menu">
                   
                   <li class="user-header">
                      <img id="user-header" src="${ctx}/assets/img/user.png" class="img-circle" alt="User Image">
                      <p>${user.name}</p>
                  </li>
                   
                  <li class="user-body"> 
                      <div class="col-xs-4 text-center"> 
                           <a href="#">Followers</a> 
                      </div> 
                      <div class="col-xs-4 text-center"> 
                           <a href="#">Sales</a> 
                      </div> 
                      <div class="col-xs-4 text-center"> 
                           <a href="#">Friends</a> 
                      </div> 
                  </li>
                  
                  <li class="user-footer">
                      <div class="pull-left">
                          <a id="systemsettingBtn" href="javascript:void(0)" class="btn btn-default btn-flat">修改密码</a>
                      </div>
                      <div class="pull-right">
                          <a href="${ctx}${apath}/logout" class="btn btn-default btn-flat">注销</a>
                      </div>
                  </li>
               </ul>
           </li>
           
           <li>
             <a href="#" data-toggle="control-sidebar">
                <i class="fa fa-gears"></i>
             </a>
           </li>
          </ul>
       </div>
    </nav>

![复制代码][copycode.gif]

header效果如下图所示，点击sidebar toggle button，logo-lg隐藏，logo-mini显示，如右图。

![1019802-20161027145640015-1543205735.png][]    ![1019802-20161027152029640-1246619151.png][]

aside设置：放在aside标签里。

![复制代码][copycode.gif]

<aside class="main-sidebar">
    <section class="sidebar">
     
     <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="搜索...">
    
           <span class="input-group-btn">
               <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                  <i class="fa fa-search"></i>
               </button>
           </span>
         </div>
     </form>
    
     
       <ul class="sidebar-menu">
       </ul>
       <script id="left-sidebarTmp" type="text/html">
           <li class="header ad-click">导航</li>
           <li class="active treeview">
              <a _href="${ctx}${apath}/dashboard" href="javascript:void(0)" data-title="首页">
                <i class="fa fa-dashboard"></i><span>首页</span><i class="fa fa-angle-left pull-right"></i>
              </a>
           </li>
           {
       {
       each sub1 as value i}}   //sub1 对应js代码中的 sub1 .
             <li class="treeview">
                <a {
      {if value.url}}_href="{
      {value.url}}"{
      {/if}} href="javascript:void(0)" data-title="{
      {value.name}}">
                   <i class="fa {
      {value.ico}}"></i><span>{
      {value.name}}</span><i class="fa fa-angle-left pull-right"></i>
                </a>
                <ul class="treeview-menu">
                  {
       {
       each value.sub as value1 i1}}   //对应 rootList[i].sub
                   <li>
                      <a {
      {if value1.url}}_href="{
      {value1.url}}"{
      {/if}} href="javascript:void(0)" data-title="{
      {value1.name}}">
                        <i class="fa {
      {value1.ico}}"></i>{
      {value1.name}}
                      </a>
                   </li>
                  {
       {
       /each}}
                </ul>
             </li>
           {
       {
       /each}}
       </script>
     </section>
     </aside>

![复制代码][copycode.gif]

![复制代码][copycode.gif]

注意：

**$\{ctx\}$\{apath\}/permission/list**接口的数据在数据库中手动添加，java后台有代码将数据存入这个接口。数据库字段与js代码所需的字段对应一致。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;span style=</code><code>"font-size: 14pt; font-family: 幼圆"</code><code>&gt;&lt;img src=</code><code>"https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161028133415968-1857840470.png"</code>&nbsp;<code>alt=</code><code>""</code><code>&gt;&lt;/span&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![1019802-20161028113851640-758782329.png][]

经过js处理过的sidebardata：

![1019802-20161028133647093-632621319.png][]

成功后sidebar显示如下图所示：

![1019802-20161028114719375-1081576047.png][]

** content设置**：放在section标签里。

![复制代码][copycode.gif]

<!- - content - ->
    <section class="content-wrapper">
        <div id="Hui-tabNav" class="Hui-tabNav ">
            <div class="Hui-tabNav-wp">
            <ul id="min_title_list" class="acrossTab cl" style="padding-left: 6px;">
                <li class="active">
                    <span title="首页" data-href="${ctx}${apath}/dashboard">首页</span><em></em>
                </li>
            </ul>
            </div>
        </div>
        <div id="iframe_box" class="Hui-article">
            <div class="show_iframe">
               <div style="display: none" class="loading"></div>
               <iframe scrolling="yes" frameborder="0" src="${ctx}${apath}/dashboard"></iframe>
            </div>
        </div>
    </section>

![复制代码][copycode.gif]

点击sidebar的链接，对应的页面都会在iframe\_box中显示出来。

![1019802-20161028120743437-119469332.png][]

[1019802-20161026173118328-1635486192.png]: https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161026173118328-1635486192.png
[1019802-20161026173228156-2029840437.png]: /images/20220316/459507d92e944126935a139dc964a2d8.png
[1019802-20161026173504750-1414502334.png]: https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161026173504750-1414502334.png
[1019802-20161026173427671-1544935100.png]: /images/20220316/dab4c31267654b89bed870f212fad53b.png
[copycode.gif]: /images/20220316/5adfb476f9324799bee9890a3d9dd858.png
[1019802-20161027145640015-1543205735.png]: https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161027145640015-1543205735.png
[1019802-20161027152029640-1246619151.png]: /images/20220316/6ce6360d4d134a34ae6f10f9782c24ef.png
[1019802-20161028113851640-758782329.png]: /images/20220316/f2ad6555aacf4d5e9dd5b411de3279cd.png
[1019802-20161028133647093-632621319.png]: /images/20220316/ee9d370c42844e468817a456eb3f51d6.png
[1019802-20161028114719375-1081576047.png]: /images/20220316/465fa5d044ef406fbd4928dad114acb1.png
[1019802-20161028120743437-119469332.png]: /images/20220316/b34c50945e9f41e583c1d2f5decbd5a2.png