现在越来越多的人使用bui前端框架了,但是bui默认的蓝色的,修改配色比较麻烦下面是我整理的一个配色表,新建一个css放到bui.css下面就可以重置为你想要的颜色了。

**BUI版本:1.5x 其他版本不保证可以通用 里面的 #F56C6C  #E6A23C 只是为了演示 可以自己定义颜色 **

备注:增强版商城重置颜色:

手机版:请新建一个 public/static/suifeng/mall/wap/css/chongzhi.css 即可重置颜色

电脑版:public/static/suifeng/mall/pc/css/chongzhi.css 新建一下就可以重置颜色

~~~

/*头部颜色*/

.header.bui-bar, .header .bui-bar, header.bui-bar, header .bui-bar {background:#F56C6C;}

/*头部按钮图标的颜色*/

.header.bui-bar .bui-bar-left>[class*=bui-btn]>i, .header.bui-bar .bui-bar-right>[class*=bui-btn]>i, .header .bui-bar .bui-bar-left>[class*=bui-btn]>i, .header .bui-bar .bui-bar-right>[class*=bui-btn]>i, header.bui-bar .bui-bar-left>[class*=bui-btn]>i, header.bui-bar .bui-bar-right>[class*=bui-btn]>i, header .bui-bar .bui-bar-left>[class*=bui-btn]>i, header .bui-bar .bui-bar-right>[class*=bui-btn]>i {color: #fff;}

/*头部按钮文字的颜色*/

.header.bui-bar .bui-bar-main, .header .bui-bar .bui-bar-main, header.bui-bar .bui-bar-main, header .bui-bar .bui-bar-main {color: #fff;font-size: .34rem;}

/*发送验证码*/

.primary-reverse {color:#F56C6C;border-color:#F56C6C;}

/*滑动值的圆点*/

.bui-range::-webkit-slider-thumb {background: #F56C6C;}

/*多选*/

.bui-choose.active, .bui-choose:checked, .bui-like.active, .bui-like:checked, .bui-fav.active, .bui-fav:checked, .bui-checkbox.active, .bui-checkbox:checked, .bui-radio.active, .bui-radio:checked {color: #F56C6C;}

/*单选*/

.bui-choose.active:before, .bui-choose:checked:before, .bui-like.active:before, .bui-like:checked:before, .bui-fav.active:before, .bui-fav:checked:before, .bui-checkbox.active:before, .bui-checkbox:checked:before, .bui-radio.active:before, .bui-radio:checked:before {color: #F56C6C;}

/*下拉边框*/

.bui-levelselect .select-value .active {border-bottom: 2px solid #F56C6C;}

.bui-levelselect .bui-list .bui-btn.active {color:#F56C6C;}

/*时间组件*/

.picker-item.picker-selected {color: #F56C6C;}

.picker-center-highlight {border-left: 2px solid #F56C6C;}

.primary-reverse {color: #F56C6C;border-color: #F56C6C;}

/*切换*/

/*.bui-switch-text:checked, .bui-switch:checked {background-color: #F56C6C;}*/

.bui-switch-text:after {background: #F56C6C;}

.bui-switch-text:checked:after {background: #F56C6C;}

/*其他*/

input.bui-tag:checked, input.bui-check:checked {background: RGBA(166, 227, 255, 0.21);border: 1px solid #F56C6C;}

/*按钮*/

[class*=bui-btn].primary {border-color: #F56C6C;background:#F56C6C}

[class*=bui-btn].primary:active {background:#E6A23C;color: #fff;border-color:#E6A23C;}

.bui-nav>.active {color:#F56C6C;background: #fff;}

/*TAB*/

.bui-tab .bui-nav .active {color: #E6A23C;background-color: #fff;}

.bui-nav>[class*=bui-btn].active:after {background:#E6A23C;}

~~~

bui 教程php,bui框架前端自定义配色基础属性相关推荐

  1. 前端框架Aurelia - 自定义组件

    自定义元素(组件)- 含有ViewModel的自定义组件 .ts文件 1.首先我们要引入两个依赖!customElement和bindable. 2.下面这个例子还示意了如何给自定义组件绑定属性to, ...

  2. javaweb模板_好程序员Java教程分享javaweb框架

    好程序员Java教程分享javaweb框架:Java是开源的,框架很多,这些框架都能解决特定的问题,提高开发效率.简化我们的代码复杂度,现在除了很多大家通用的一些主流框架外,很多公司针对自己的业务会自 ...

  3. 如何在框架外部自定义C++ OP

    如何在框架外部自定义C++ OP 通常,如果PaddlePaddle的Operator(OP)库中没有所需要的操作,建议先尝试使用已有的OP组合,如果无法组合出您需要的操作,可以尝试使用paddle. ...

  4. python爬虫scrapy框架教程_Python爬虫教程-30-Scrapy 爬虫框架介绍

    从本篇开始学习 Scrapy 爬虫框架 Python爬虫教程-30-Scrapy 爬虫框架介绍 框架:框架就是对于相同的相似的部分,代码做到不出错,而我们就可以将注意力放到我们自己的部分了 常见爬虫框 ...

  5. Spring教程 - Spring核心框架教程

    Spring教程 - Spring核心框架教程 Spring是最广泛使用的Java EE框架之一.我已经在Spring Tutorial上写了很多内容,这是一篇摘要文章,它将作为索引按顺序完成所有这些 ...

  6. 个人网站搭建保姆级教程(2)- 前端工程umi脚手架搭建

    前言 最近搞了个服务器,想着自己做个网站的脚手架,因为自己是纯前端新手,而且半路出家,中途踩了好多坑,准备写5篇给各位大佬们分享一下,如何从0搭建个人网站 服务器购买与环境搭建 前端工程umi脚手架搭 ...

  7. 仿百度壁纸客户端(一)——主框架搭建,自定义Tab+ViewPager+Fragment

    仿百度壁纸客户端(一)--主框架搭建,自定义Tab+ViewPager+Fragment 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment ...

  8. 实战商城app之uView框架前端极速开发课程简介

    **uniapp商城实战之uView UI框架前端极速开发课程**已发布上线 https://edu.csdn.net/course/detail/35573 共108多节,包含了uview官网中90 ...

  9. 【3】VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色

    相关文章: [一]tensorflow安装.常用python镜像源.tensorflow 深度学习强化学习教学 [二]tensorflow调试报错.tensorflow 深度学习强化学习教学 [三]t ...

最新文章

  1. 使用Movie Maker制作视频相册
  2. Smalidea+IntelliJ IDEA/Android Studio动态调试安卓app教程
  3. mysql 创建端口号_MySQL命令行 不同端口登录 执行SQL文件 创建用户 赋予权限 修改root密码...
  4. VTK:网格之SimpleElevationFilter
  5. 重新过一遍ASP.NET 2.0(C#)(5) - Localization(本地化,多语言)
  6. hdfs数据节点分发什么协议_HDFS主要节点解说(一)节点功能
  7. 运行gclient一直没反应_安川变频器通电没反应维修措施分享
  8. 用GLM来读取显示有纹理的OBJ
  9. 全国大数据分析系统基于vue echarts
  10. SQLserver C#将图片以二进制方式存储到数据库,再从数据库读出图片
  11. 如果有一个工具可以帮助你将你的代码可视化,你需要吗?
  12. 防止跨站攻击——CSRFToken
  13. 亲测好用的万能工具箱:Parallels Toolbox for mac中文版
  14. 什么叫pmt测试分析_DVT测试是什么意思?(smt术语详解)
  15. Python干货 | 制作遥感影像图
  16. Python判断语句中 and 和 or 的用法
  17. uac管理员程序_在Windows 10中创建没有UAC提示的管理员模式快捷方式
  18. 取得df的列名的列表,取得df的列宽,把df的列融入成为其他df的列
  19. flashback的配置
  20. Windows7用户账户控制(UAC)白名单的设置

热门文章

  1. 360浏览器服务组件怎么关闭,开机总是弹出新闻窗
  2. mac os netcat -lp 不能使用情况解决
  3. 一道逻辑题 - 我拿走了哪个数
  4. 如何使用 MATLAB 创建二体轨道 逐步演练使用 MATLAB 确定航天器如何在较大物体引力的影响下移动
  5. 中国天气网天气预报接口
  6. 续流二极管的作用是什么?
  7. ubuntu搭建NTP服务器
  8. 全民线下观影约约约!乐视这次又在打什么算盘?
  9. 古人为什么不发明计算机,古人有没有什么看起来好用 但实际上没什么用的发明?...
  10. td标签上下左右居中