宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-19

AdminLTE是一个很棒的单纯的由超文本标记语言和半铸钢钢性铸铁(铸造半钢)构建的后台模板,在这片文章中,我将讲述如何将AdminLTE和Laravel优雅的整合在一起,而且我们可以通过凉亭来及时的更新和管理管理员。

1、新建laravel项目

作曲家创作-项目Lara vel/Lara vel myapp-prefere-dist 2,使用前端包管理器添加AdminLte(可以使用新公共管理或者纱线、凉亭),在项目根目录下执行如下命令:

纱线添加管理会在项目根目录下看到,node_modulesadmin-lte

3、将管理-lte文件夹复制到公众的目录下,开始使用:

首先按照laravel模板的方式建立布局基础样式模板default.balde.php,将管理-lte下的starter.html内容复制到系统默认值中,

并将头尾侧边栏等公用部分放入不同的子模板_页眉_页脚_左侧中,如图:

最后的系统默认值模板代码:(注意修改好导入样式和射流研究…文件的路径)

!DOCTYPE htmlhtmlhead元字符集='utf-8 '元http-equiv=' X-UA-兼容'内容=' IE=边'标题后台管理系统/title!-告诉浏览器响应屏幕宽度-元内容='宽度=设备宽度,初始比例=1,最大比例=1,用户可缩放=无'名称='视口!- Bootstrap 3.3.6 - link rel='样式表href='/admin-LTE/Bootstrap/CSS/Bootstrap。量滴CSS ' rel='外部不跟随!- Font Awesome - link rel='样式表href=' https://cdnjs。cloudflare。com/Ajax/libs/Font-Awesome/4。5 .0/CSS/Font-牛逼。量滴CSS ' rel='外部无跟随'!-ion cons-link rel='样式表href=' https://cdnjs。云耀斑。com/Ajax/libs/ion cons/2。0 .1/CSS/ion cons。量滴CSS ' rel='外部无跟随'!-主题样式-链接rel='样式表href='/admin-LTE/dist/CSS/admin LTE。量滴CSS ' rel='外部' nofollow '链接rel='样式表href='/admin-LTE/dist/CSS/skins/skin-blue。量滴CSS ' rel='外部不跟随!-[if lt IE 9]脚本src=' http :https://OSS。maxcdn。com/html 5 shiv/3。7 .3/html 5 shiv。量滴js '/script script src=' http :3359 OSS。maxcdn。com/response/1。4 .2/回应。量滴js '/脚本![endif]-/head body class=' hold-transition skin-blue sidebar-mini ' div class=' wrapper ' @ include(' admin。布局。_ header ')@ include(' admin。布局。_ left ')@ yield(' content ')@ include(' admin。布局。_ tip ')div class=' control-侧边栏-BG '/div/div!- jQuery 2.2.3 -脚本src=' http :/admin-LTE/plugins/jQuery/jQuery-2。2 .3 .量滴js /脚本!-自举3.3.6 -脚本src=' http :/admin-LTE/Bootstrap/js/Bootstrap。量滴js /脚本!-AdminLTE App-脚本src=' http :/Admin-LTE/dist/js/App。量滴js '/脚本/正文/html项目中的其他页面就可以继承使用布局模板了:

@ extends(' admin。布局。default()@节(' content ')div class=' content-wrapper '节class=' content-Header ' h1页面标题小首页管理/small/h1 ol class='面包屑' lia href=' # ' rel='外部no follow ' I class=' fa-dashboard '/I Level/a/Li Li class=' active '此处/Li/ol/section section class=' content ' div class=' row ' div class=' col-MD-6 '!-Box 1-div class=' Box Box-primary ' div class=' Box-带有-边境的标题h3 class='box-title '盒子一/H3 div='框-工具拉-右'按钮=' BTN BTN-框-工具'数据-小部件='折叠'数据-切换='工具提示' title='折叠' I class=' fa fa-减/I/button button class=' BTNBTN-盒子-工具'数据-widget=' Remove '数据-切换=' tooltip ' title=' Remove ' I class=' fa-times '/I/button/div/div class=' box-body '表格/表格/div class=' box-div想要使用管理-lte自带的任何样式,直接复制那部分的页面代码粘贴到需要的位置即可,

在本地电脑上直接打开管理-lte下index.html就可以查看到所有的样式效果

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

以上Laravel的实现方法——添加后台模板AdminLte是边肖分享的全部内容。希望能给大家一个参考,多支持我们。

更多资讯
游戏推荐
更多+