Laravel-添加后台模板AdminLte的实现方法
时间:2022-07-27
本文章向大家介绍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_modulesadmin-lte
3、将admin-lte文件夹复制到public目录下,开始使用:
首先按照laravel模板的方式建立layouts基础样式模板 default.balde.php, 将admin-lte下的starter.html内容复制到default中,
并将头尾侧边栏等公用部分放入不同的子模板_header _footer _left中,如图:
最后的default模板代码:(注意修改好导入样式和js文件的路径)
<!DOCTYPE html
<html
<head
<meta charset="utf-8"
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<title 后台管理系统</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.6 --
<link rel="stylesheet" href="/admin-lte/bootstrap/css/bootstrap.min.css" rel="external nofollow"
<!-- Font Awesome --
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="external nofollow"
<!-- Ionicons --
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="external nofollow"
<!-- Theme style --
<link rel="stylesheet" href="/admin-lte/dist/css/AdminLTE.min.css" rel="external nofollow"
<link rel="stylesheet" href="/admin-lte/dist/css/skins/skin-blue.min.css" rel="external nofollow"
<!--[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]--
</head
<body class="hold-transition skin-blue sidebar-mini"
<div class="wrapper"
@include('admin.layouts._header')
@include('admin.layouts._left')
@yield('content')
@include('admin.layouts._footer')
@include('admin.layouts._tip')
<div class="control-sidebar-bg" </div
</div
<!-- jQuery 2.2.3 --
<script src="/admin-lte/plugins/jQuery/jquery-2.2.3.min.js" </script
<!-- Bootstrap 3.3.6 --
<script src="/admin-lte/bootstrap/js/bootstrap.min.js" </script
<!-- AdminLTE App --
<script src="/admin-lte/dist/js/app.min.js" </script
</body
</html
项目中的其他页面就可以继承使用layouts模板了:
@extends('admin.layouts.default')
@section('content')
<div class="content-wrapper"
<section class="content-header"
<h1
Page Header
<small 首页管理</small
</h1
<ol class="breadcrumb"
<li <a href="#" rel="external nofollow" <i class="fa fa-dashboard" </i Level</a </li
<li class="active" Here</li
</ol
</section
<section class="content"
<div class='row'
<div class='col-md-6'
<!-- Box1 --
<div class="box box-primary"
<div class="box-header with-border"
<h3 class="box-title" 盒子一</h3
<div class="box-tools pull-right"
<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse" <i class="fa fa-minus" </i </button
<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove" <i class="fa fa-times" </i </button
</div
</div
<div class="box-body"
<table </table
</div
<div class="box-footer"
<form action='#'
<input type='text' placeholder='New task' class='form-control input-sm' /
</form
</div
</div
</div
</div
</section
</div
@stop
想要使用admin-lte自带的任何样式,直接复制那部分的页面代码粘贴到需要的位置即可,
在本地电脑上直接打开admin-lte下index.html就可以查看到所有的样式效果
本例最后达到的效果如图:
以上这篇Laravel-添加后台模板AdminLte的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。
- 快速、直接的XSS漏洞检测爬虫 – XSScrapy
- 希尔排序
- RxJava2 实战知识梳理(3) - 优化搜索联想功能
- ubuntu上安装Apache2+ModSecurity及自定义WAF规则
- C++中关于指针初始化和使用NULL的理解
- ViewPager 实现 Galler 效果, 中间大图显示,两边小图展示(优化篇)
- (虚)继承类的内存占用大小
- Linux服务器数据定期同步和备份方式
- Android组件化搭建
- ECMAScript 6 入门简介
- RxJava2 实战知识梳理(2) - 计算一段时间内数据的平均值
- 用了Docker,妈妈再也不担心我的软件安装了 - 基础篇
- 适配器模式(Adapter)
- 敞开的地狱之门:Kerberos协议的滥用
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- 使用Express+TypeScript编写后台服务
- WPF 点击按钮时更改按钮样式界面效果的 XAML 实现方法
- ASP.NET Core 警惕可空类型开启之后模型校验失败
- os.path.abspath()的作用
- 机器学习-Coursera笔记
- 抖音解析-抖音视频去水印下载
- 自定义View | 基础概述 & 自定义TextView实战 & 基于源码分析自定义View继承自ViewGroup时无法正常绘制的问题
- AQS 原理剖析
- 无来源ip的RDP爆破防御对策小记
- 在 Kotlin 的 data class 中使用 MapStruct
- 内存占用用手就能算出来
- 如何在 CentOS 下快速搭建 Nginx 服务器
- Servlet API 源码剖析
- Borg:Google集群管理大杀器
- 一文了解Zookeeper