Fastadmin 修改样式,替换掉默认皮肤

Fastadmin 自带的皮肤有十二种:

skin-blue
skin-white
skin-purple
skin-green
skin-red
skin-yellow
skin-blue-light
skin-white-light
skin-purple-light
skin-green-light
skin-red-light
skin-yellow-light

默认的是第四个: skin-green,界面风格如下:

虽然”右上角“可以设置显示的皮肤, 但都需要每个账户登录后去手动设置。 比较麻烦。想修改下代码,设置一种风格,比如: skin-red-light 这种风格。

下面的教程是管理后台的默认风格修改, 前台风格自行变通。

1.要修改默认加载的css文件

文件位置public/assets/css/backend.css

把上图中框中的代码改成

@import url("../css/skins/skin-red-light.css");

2.修改html默认body的样式。

文件位置:application\admin\view\index\index.html

把上图中框中的 body的class改成skin-red-light。

特别注意:如果你在开发环境中, debug=true的话, 上面两步就完成了默认的样式的修改了。

但到了生产环境, application/config.php中, debug=false的话, 那样式就出错了。

所以为了安全其间,还要有第三步

3. 重新压缩下css文件,把修改的backend.css同步到 backend.min.css

在你项目的根目录, 执行:

php think min -m backend -r css

如果发现php不是可用命令的话, 把php的路径带上或者把php的路径设置成环境变量。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现一个模态框,可以使用fastadmin自带的layer插件。下面是一个简单的实现步骤: 1. 在需要触发模态框的页面中引入layer和jquery: ```html <script src="__STATIC__/layer/layer.js"></script> <script src="__STATIC__/jquery/jquery.min.js"></script> ``` 2. 在需要触发模态框的元素上绑定click事件,例如一个按钮: ```html <button class="btn btn-primary" id="my-btn">打开模态框</button> ``` ```javascript $('#my-btn').click(function(){ layer.open({ type: 1, title: '模态框标题', skin: 'layui-layer-demo', //样式类名 closeBtn: 1, //显示关闭按钮 anim: 2, shadeClose: true, //开启遮罩关闭 area: ['600px', '400px'], //宽高 content: '<div>模态框内容</div>' }); }); ``` 3. 在layer.open()方法中设置需要的参数,例如宽高、标题、内容等。 4. 如果需要在模态框中显示一个表单并提交数据,可以在content参数中设置一个form元素,然后在layer.open()方法中添加一个btn参数,指定提交按钮的事件回调。 例如: ```javascript layer.open({ type: 1, title: '模态框标题', skin: 'layui-layer-demo', //样式类名 closeBtn: 1, //显示关闭按钮 anim: 2, shadeClose: true, //开启遮罩关闭 area: ['600px', '400px'], //宽高 content: '\ <form class="layui-form" action="">\ <div class="layui-form-item">\ <label class="layui-form-label">用户名</label>\ <div class="layui-input-inline">\ <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">\ </div>\ </div>\ <div class="layui-form-item">\ <label class="layui-form-label">密码</label>\ <div class="layui-input-inline">\ <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">\ </div>\ </div>\ <div class="layui-form-item">\ <div class="layui-input-block">\ <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\ <button type="reset" class="layui-btn layui-btn-primary">重置</button>\ </div>\ </div>\ </form>', btn: ['提交', '取消'], yes: function(index, layero){ //按钮【提交】的回调 //获取表单数据 var data = $('.layui-form').serialize(); console.log(data); //发送ajax请求提交数据 layer.close(index); //关闭模态框 }, btn2: function(index, layero){ //按钮【取消】的回调 //关闭模态框 layer.close(index); } }); ``` 5. 如果需要在模态框弹出时,自动加载一些数据,可以在layer.open()方法中添加一个success参数,指定成功回调函数。 例如: ```javascript layer.open({ type: 1, title: '模态框标题', skin: 'layui-layer-demo', //样式类名 closeBtn: 1, //显示关闭按钮 anim: 2, shadeClose: true, //开启遮罩关闭 area: ['600px', '400px'], //宽高 content: '<div id="modal-content">模态框内容</div>', success: function(layero, index){ //模态框弹出成功后,发送ajax请求获取数据 $.get('/api/data', function(data){ //将数据渲染到模态框中 $('#modal-content').html(data); }); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wwwarewow

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值