当前位置:首页 > CMS教程 > 其它CMS > 列表

Laravel-添加后台模板AdminLte的实现方法

发布:smiling 来源: PHP粉丝网  添加日期:2021-12-27 15:41:37 浏览: 评论:0 

今天小编就为大家分享一篇Laravel-添加后台模板AdminLte的实现方法,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧。

AdminLTE是一个很棒的单纯的由 HTML 和 CSS 构建的后台模板,在这片文章中,我将讲述如何将 AdminLTE 和 Laravel 优雅的整合在一起,而且我们可以通过 Bower 来及时的更新和管理 AdminLTE。

1、新建laravel项目

composer create-project laravel/laravel myapp --prefer-dist

2、使用前端包管理器添加AdminLte(可以使用npm或者yarn、bower),在项目根目录下执行如下命令:

yarn add admin-lte

会在项目根目录下看到,node_modules\admin-lte\

Laravel添加后台模板 AdminLte

3、将admin-lte文件夹复制到public目录下,开始使用:

首先按照laravel模板的方式建立layouts基础样式模板 default.balde.php, 将admin-lte下的starter.html内容复制到default中,

并将头尾侧边栏等公用部分放入不同的子模板_header _footer _left中,如图:

Laravel添加后台模板 AdminLte

最后的default模板代码:(注意修改好导入样式和js文件的路径)

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.  <meta charset="utf-8"
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge"
  6.  <title>后台管理系统</title> 
  7.  <!-- Tell the browser to be responsive to screen width --> 
  8.  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"
  9.  <!-- Bootstrap 3.3.6 --> 
  10.  <link rel="stylesheet" href="/admin-lte/bootstrap/css/bootstrap.min.css" rel="external nofollow" > 
  11.  <!-- Font Awesome --> 
  12.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="external nofollow" > 
  13.  <!-- Ionicons --> 
  14.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="external nofollow" > 
  15.  <!-- Theme style --> 
  16.  <link rel="stylesheet" href="/admin-lte/dist/css/AdminLTE.min.css" rel="external nofollow" > 
  17.  <link rel="stylesheet" href="/admin-lte/dist/css/skins/skin-blue.min.css" rel="external nofollow" > 
  18.  <!--[if lt IE 9]> 
  19.  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
  20.  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
  21.  <![endif]--> 
  22. </head> 
  23. <body class="hold-transition skin-blue sidebar-mini"
  24. <div class="wrapper"
  25.  @include('admin.layouts._header'
  26.  @include('admin.layouts._left'
  27.  @yield('content'
  28.  @include('admin.layouts._footer'
  29.  @include('admin.layouts._tip'
  30.  <div class="control-sidebar-bg"></div> 
  31. </div> 
  32. <!-- jQuery 2.2.3 --> 
  33. <script src="/admin-lte/plugins/jQuery/jquery-2.2.3.min.js"></script> 
  34. <!-- Bootstrap 3.3.6 --> 
  35. <script src="/admin-lte/bootstrap/js/bootstrap.min.js"></script> 
  36. <!-- AdminLTE App --> 
  37. <script src="/admin-lte/dist/js/app.min.js"></script> 
  38. </body> 
  39. </html> 

项目中的其他页面就可以继承使用layouts模板了:

  1. @extends('admin.layouts.default'
  2. @section('content'
  3. <div class="content-wrapper"
  4.  <section class="content-header"
  5.   <h1> 
  6.   Page Header 
  7.   <small>首页管理</small> 
  8.   </h1> 
  9.   <ol class="breadcrumb"
  10.   <li><a href="#" rel="external nofollow" ><i class="fa fa-dashboard"></i> Level</a></li> 
  11.   <li class="active">Here</li> 
  12.   </ol> 
  13.  </section> 
  14.  <section class="content"
  15.   <div class='row'
  16.  <div class='col-md-6'
  17.   <!-- Box1 --> 
  18.   <div class="box box-primary"
  19.    <div class="box-header with-border"
  20.     <h3 class="box-title">盒子一</h3> 
  21.     <div class="box-tools pull-right"
  22.      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> 
  23.      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> 
  24.     </div> 
  25.    </div> 
  26.    <div class="box-body"
  27.     <table></table> 
  28.    </div> 
  29.    <div class="box-footer"
  30.     <form action='#'
  31.      <input type='text' placeholder='New task' class='form-control input-sm' /> 
  32.     </form> 
  33.    </div> 
  34.   </div> 
  35.  </div> 
  36.  </div> 
  37.  </section> 
  38. </div> 
  39.  
  40. @stop 

想要使用admin-lte自带的任何样式,直接复制那部分的页面代码粘贴到需要的位置即可,在本地电脑上直接打开admin-lte下index.html就可以查看到所有的样式效果

本例最后达到的效果如图:

Laravel添加后台模板 AdminLte

Tags: Laravel添加后台模板 AdminLte

分享到: