ColorUI开发手册（适用于后端同学使用）

已于 2022-06-21 18:48:13 修改
阅读量1.6w 收藏 17
点赞数 4
分类专栏： ColorUi 文章标签： 小程序 ui
于 2021-10-12 11:35:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LookOutThe/article/details/120720297
版权

一、介绍

开发微信小程序的时候，使用ui会很方便。UI有很多：

微信小程序UI组件库合集 | 微信开放社区

本文选择了ColorUI，感觉是最好看的一个(如图）

demo地址（可以看到有很多的组件）：ColorUI组件库​​​​​​

网页demo挂了，小程序上可以看：

 

 二、说明

本人只会简单的html，js，css，工作是后端开发，不会使用npm那种方式。所以本文适用于后端同学使用。

三、目录

使用文档分为以下几篇

  1.  使用ColorUI构建小程序项目_LookOutThe的博客-CSDN博客
  2.  https://blog.csdn.net/LookOutThe/article/details/120720960
七号公园的忧伤
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ColorUI使用与技巧
Linlietao0587的博客
12-23 1万+
1 ColorUI学习 1.1 准备 引入资源 demo中的colorui – app.wxss @import '/colorui/icon.wxss'; @import '/colorui/main.wxss'; 1.2 自定义导航栏 app.json 配置取消系统导航栏，并全局引入组件 "window": { "navigationBarBackgroundColor": "#39b54a", "navigationBarTitleText": "Color UI", "naviga
ColorUI 全网最全使用文档（建议收藏）
糜家智の博客
06-18 1万+
全网最全color-ui文档
精仿苹果自带的计算器，颜值高！基于SUMER UI3.0和Uniapp前端框架！在“计算器” App中，你可以使用标准计算器进行基本的算术计算。或使用科学计算器进行指数函数、对数函数和三角函数的计算。
最新发布
我的昵称：程序员SUMER（全网同名）
05-26 366
精仿苹果自带的计算器，颜值高！基于SUMER UI3.0和uniapp前端框架！在“计算器” App 中，你可以使用标准计算器进行基本的算术计算。或使用科学计算器进行指数函数、对数函数和三角函数的计算。
color ui
qinjinhua_的博客
07-20 1万+
ColorUI是一个css库！！！
colorUI使用
热门推荐
苏帕AI
08-19 2万+
colorUI使用 一、colorUI简介 官网地址—还在完善 colorUI特点： 组件精美，色彩十分鲜艳 封装特特特特别的好，每一个样式都是单独的class选择器，都是封装极好的css小组件 兼容性，扩展性极好。亲测在vant weep组件上可以完美使用，并且对于微信原生组件的支持很好。 二、使用方法 下载 GIthub地址：https://blog.csdn.net/IT_TIfa...
uniapp使用colorUI
weixin_47175934的博客
12-22 1682
1：把colorui里三个文件复制到自己项目中去。2：想要的c复制到自己的项目中。
ColorUI 使用文档
DevilAngelia的博客
08-06 9499
ColorUI 简易 使用文档 友情链接 文本大小 颜色 图片 头像 边距 布局 列表 友情链接 ColorUI使用文档 看云： https://www.kancloud.cn/als24/color/1141392 ColorUI H5 H5： http://demo.color-ui.com/h5.html#/ 原文链接 简书： https://www.jianshu.com/p/450527d7239a#comments 文本大小 xs sm df lg xl xxl sl xsl
uniapp引入colorUi组件库，风一般的感觉！！！
weixin_53339757的博客
04-03 645
uniapp引入colorUi组件库
基于uni-app和colorUI开发H5初始模板
12-22
通过这个【H5-demo】模板，开发者可以快速上手uni-app和colorUI的使用，进行H5页面的开发。只需根据自己的需求修改模板中的页面和组件，即可生成符合自己应用风格的H5页面。同时，由于uni-app的跨平台特性，这个模板...
Element-UI使用手册1
08-03
这是一个关于Element-UI的基础使用手册，Element-UI是一个基于Vue.js的开源UI组件库，用于快速构建现代化的Web应用程序。手册主要分为几个部分，包括开发指南、基本组件和表单组件。 1. **开发指南**： - **安装**...
基于uniapp、uviewUI、colorUI实现的记事本，适用于微信小程序。后端基于node.js，已放置在云服务器上。
05-15
基于uniapp、uviewUI、colorUI实现的记事本，适用于微信小程序。后端基于node.js，已放置在云服务器上。 基于uniapp、uviewUI、colorUI实现的记事本，适用于微信小程序。后端基于node.js，已放置在云...
ColorUI-小程序原生高颜值组件库--ColorUI组件库.zip
09-23
简介hi!开发者！ColorUI迎来了2.0的升级，相比之前的版本，2.0版本重构了基础代码，增加了更多的配色，这是一个全新的小程序UI解决方案。ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！项目为个人开源项目，如果项目有帮到你，希望能支持下开发者。使用下载源码包可得到 Demo 和 Template 两个项目， Demo 包含所有组件源码。 Template 是一个已经引用了ColorUI的空白模板。Demo 即文档。在线文档 编写中...交流微信群：加入微信群请先添加开发者微信，备注GitHub。QQ群：240787041 或扫描二维码。
基于ColorUI的微信小程序
11-08
基于ColorUI的微信小程序，暂时留存，纯属测试，纯属测试
微信小程序colorUI组件库的通用css
08-13
压缩包里面包含icon.css和main.css两个文件，是colorUI组件库的通用css，自行新建一个文件夹存在，从微信小程序的全局样式那引入即可
最新Color Admin1.9 - bootstrap3响应后台模板+前端网页模板
02-12
本人花30RMB从淘宝购买的最新Color Admin1.9响应式后台模板，非常漂亮，代码完整！下面是模板预览地址！ http://www.seantheme.com/color-admin-v1.9/admin/html/index.html Color Admin is the new premium and fully responsive admin template. Concept of design for Color Admin is based on the FLAT design and finally it comes out with a clean and neat design. It is built on top of the popular Bootstrap Framework. Besides that, it is bundled with a lot of third party plugins and useable elements such as buttons, thumbnails, media objects and much more... Features Built with Bootstrap 3.3.5 AJAX + HTML + ANGULAR Version 3 Front End Template 5 Admin Color Theme 2 Admin Header Theme (Black & White) 17 Admin Page Options 2 Admin Content Color Theme Local Storage Panel Modern & Old Browser Compatibility Compatible with DataTables & 9 DataTables Extension Unlimited Nav Tabs Smooth Mobile / Tablet Scrollbar Implementation Vector Icons - FontAwesome v4.4.0 Vector Icons - Simple Line Icons Vector Icons - Ionicons (700++ Icons) Fully Responsive HTML5 Markup & CSS3 JShint & HTML5 Valid Easy to understand HTML Structure, CSS Classes & Javascript markup Contrast Colors Well Documented HTML pages including: Front end - One Page Parallax (5 Theme Color) Front end - Support Forum (5 Theme Color) Front end - Blog (5 Theme Color) AJAX + HTML + ANGULAR Version Dashboard Dashboard v2 Email Email V2 Email V2 Compose Email V2 Detail General UI Elements Typography Buttons Tabs & Accordions Unlimited Nav Tabs Widget Boxes Media Object Simple Line Icons Icons Tree Views Language Bar & Icons Form Elements Form Plugins Form Validation Form Slider + Switcher Wizards Wizards + Validation WYSIWYG X-Editable Multiple File Upload Basic Table Managed Table 9 DataTables Plugins DataTables Extension Combination Flot Charts Morris Charts Chart JS Chart d3 Calendar Maps Gallery Gallery v2 Blank Page Page With Footer Page Without Sidebar Page With Right Sidebar Page With Minified Sidebar Page With Two Sidebar Page Full Height Page With Simple Line Icons Page With Ionicons Page With Light Sidebar Page With Wide Sidebar Page With Boxed Layout Page With Top Menu Page With Mixed Menu Page with Boxed Layout and Mixed Menu Page With Transparent Sidebar Search Results Invoice 404 Error Page Login Login V2 Login V3 Register V3 System Email Template Newsletter Email Template Coming Soon Page Timeline Page Profile Page Predefined CSS Classes Credits: jvectormap: http://jvectormap.com/ jQuery slimScroll: http://rocha.la/jQuery-slimScroll flot charts: http://www.flotcharts.org/ fullcalendar http://arshaw.com/fullcalendar/ Gritter: http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/ Isotope: http://isotope.metafizzy.co/ Lightbox 2: http://lokeshdhakar.com/projects/lightbox2/ Bootstrap Datepicker: http://bootstrap-datepicker.readthedocs.org/en/release/ Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/ Bootstrap Colorpicker: http://www.eyecon.ro/bootstrap-colorpicker Bootstrap ComboBox: https://github.com/danielfarrell/bootstrap-combobox Bootstrap Select: http://silviomoreto.github.io/bootstrap-select/ Masked Input: http://digitalbush.com/projects/masked-input-plugin/ Password Strength Indicator and Generator: http://benjaminsterling.com/password-strength-indicator-and-generator/ Parsley: http://parsleyjs.org/index.html Bootstrap WYSIHTML5: http://jhollingworth.github.io/bootstrap-wysihtml5/ CKEditor: http://ckeditor.com/ Bootstrap Wizard: https://github.com/gilluminate/Bootstrap-Wizard Sparkline: http://omnipotent.net/jquery.sparkline/ Table Data: http://datatables.net/blog/Twitter_Bootstrap_2 Ion Range Slider: http://ionden.com/a/plugins/ion.rangeSlider/en.html jQuery Tag It: http://aehlke.github.io/tag-it/ jQuery Countdown: http://keith-wood.name/countdown.html Zurb Email Template: http://zurb.com/ink/ jQuery Cookie: https://github.com/carhartl/jquery-cookie Switchery: http://abpetkov.github.io/switchery/ Powerange: http://abpetkov.github.io/powerange/ X-Editable: http://vitalets.github.io/x-editable/ jQuery File Upload: http://blueimp.github.io/jQuery-File-Upload/ jQuery-Knob: http://anthonyterrien.com/knob/ Simple Line Icons: http://graphicburger.com/simple-line-icons-webfont/ Morris Chart: http://morrisjs.github.io/morris.js/index.html Superbox: http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/ Pace: http://github.hubspot.com/pace/ Chart JS: http://www.chartjs.org/ Flat Icon: http://iconshow.me/category/mixed/small-n-flat-icon/ In Progress FRONT END - corporate FRONT END - e-commerce UI: Sidebar Widget UI: Code Generator UI: Chatting bar UI: Extra UI Component Page with Top Navbar dashboard v3 More Plugins...
基于微信小程序的 ColorUI扩展的商城模板
02-23
基于微信小程序的 ColorUI扩展的商城模板
colorui.rar
11-29
【标题】"colorui.rar" 是一个压缩包文件，它包含了一个名为 "colorui" 的资源库，专门用于微信小程序（WeChat Mini Program）的界面设计。这个资源库主要是为了帮助开发者快速构建美观且一致的用户界面，通过引入...
ColorUI高颜值组件库，传授使用速成的方法和快速脱坑的技巧，顺便填坑
qq_40982347的博客
08-13 8367
ColorUI速成 简单介绍 ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！这个组件以高颜值而得到推广，深受开发者的喜爱，由作者文晓港创作，目前仅更新到2.0版本。 GitHub资源地址：https://github.com/weilanwl/ColorUI 优势 一：组件精美，可以说每一个都制作精良，作者很用心，UI功底很扎...
微信小程序组件库——colorUI 的使用方法
BubbleABC的博客
05-29 1908
ColorUI界面精美，使用方法简单，只需将ColorUI的代码片段复制到你的小程序中即可，方便自己定制。 下面是ColorUI官方的小程序，可以在手机上先预览实际效果 官方网站：https://www.color-ui.com/ GitHub：https://github.com/weilanwl/ColorUI 介绍下使用方法： 首先在官方网站下载压缩包解压后，打开目录**/demo/colorui**，将里面的两个文件icon.wxss和main.wxss复制到你的项目下 之后再在app.wxss
怎么使用colorui
09-08
要使用ColorUI，你需要按照以下步骤进行操作： 第一步，下载代码包并获取素材。你可以在ColorUI的官方网站（https://github.com/weilanwl/ColorUI）上下载代码包。下载后，你将获得一个包含了colorui的文件夹。 第...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

七号公园的忧伤

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

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

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

打赏作者

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

抵扣说明：

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

余额充值