Bootstrap 颜色选择器快速集成教程5 步把取色能力装进你的页面【免费下载链接】bootstrap-colorpickerbootstrap-colorpicker - 这是一个基于 Bootstrap 的开源前端库提供了丰富的颜色选择器组件可以用于构建漂亮的 Web 应用程序。适用于 React 应用程序开发、快速搭建原型、提高开发效率。项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker当产品经理在需求文档里写下商品标签页支持自定义主题色时很多前端开发者的第一反应是去网上搜一个 jQuery 弹窗然后手动绑定一堆鼠标事件——结果往往是拖了三天、bug 一堆。其实这件事有一个更省力的答案bootstrap-colorpicker一个专为 Bootstrap 4 打造的开源颜色选择器插件几行代码就能给任意输入框加上专业的取色面板支持色相、透明度、预设色板等多种交互方式。这篇文章用 5 个可运行的实战步骤带你快速上手这款颜色选择器。开工前先备好三样东西依赖、安装、引入bootstrap-colorpicker 的定位是Bootstrap 生态的补充件所以它自己并不重复造轮子。使用前你需要确认环境里已有依赖版本要求用途jQuery 2.2插件运行的基石所有实例都是 jQuery 对象Bootstrap CSS4.x输入框加号input addon与弹层的样式Bootstrap JS Bundle4.x可选弹层 popover 的定位若用内联模式可不引安装方式任选其一npmnpm install bootstrap-colorpickerYarnyarn add bootstrap-colorpickerComposercomposer require itsjavi/bootstrap-colorpicker源码编译git clone https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker后执行npm install npm run build要点提示dist目录下的成品文件只随 npm / Yarn 发布走源码方式需要自己构建一次。3 分钟跑通第一个颜色选择器新建一个 HTML 文件把下面代码原样粘贴进去就能看到效果!DOCTYPE html html langzh-CN head meta charsetutf-8 link hrefnode_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css relstylesheet /head body !-- 一个普通的只读输入框value 是初始颜色 -- div iddemo input typetext value#00AABB readonly /div !-- 顺序不能乱先 jQuery再插件 -- script srcnode_modules/jquery/dist/jquery.min.js/script script srcnode_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js/script script $(function () { // 核心只有这一行选中 input调用 colorpicker() 完成初始化 $(#demo input).colorpicker(); }); /script /body /html逐行拆解这段代码你会发现自己其实只做了三件事引入样式bootstrap-colorpicker.css是取色面板的皮肤漏了它界面会错乱引入脚本插件基于 jQuery所以 jQuery 必须加载在前调用初始化$(#demo input).colorpicker()把输入框包装成颜色选择器——点击输入框会弹出取色面板选中的颜色会实时回写到输入框。此时你的页面已经具备完整的取色能力饱和度区域拖拽、色相/透明度滑块、颜色预览一应俱全全程没有手写一行鼠标事件。从默认样式到定制化配置项、事件与常用 API默认效果是能用但真实项目往往需要好看且贴合业务。bootstrap-colorpicker 的定制入口是初始化时传入的配置对象$(#customPicker input).colorpicker({ format: hex, // 强制输出 hex 格式可选 rgb / hsl / auto horizontal: true, // 滑块改为水平布局适合宽度较大的弹层 useAlpha: true, // 显示透明度滑块 popover: { placement: left } // 弹层出现在输入框左侧 });除了视觉配置插件还提供了一组事件让你感知用户做了什么事件名触发时机常见用途colorpickerCreate实例创建完成初始化联动逻辑colorpickerChange颜色被改变含程序赋值同步表单值、刷新图表colorpickerShow/colorpickerHide弹层打开 / 关闭控制页面滚动colorpickerEnable/colorpickerDisable禁用 / 启用配合权限开关每个事件回调里都能拿到一个增强事件对象e.color颜色对象支持.toString()转换、e.value颜色字符串和e.colorpicker插件实例。进阶技巧实例上的方法也很好记——setValue(#ff0000)程序化改色、getValue()读取当前色、show()/hide()手动控制弹层、destroy()销毁实例。获取实例的姿势是$(#picker).colorpicker(colorpicker)。实战一把颜色选择器嵌进商品表单商品后台常见的需求是编辑品牌主色。把颜色选择器和表单联动只需要监听colorpickerChange在用户取色的瞬间把新值写进隐藏字段div idbrandColor input typetext value#6D2781 readonly !-- 真正提交给后端的隐藏字段 -- input typehidden namebrand_color value#6D2781 /div script $(function () { $(#brandColor) .colorpicker({ format: hex }) .on(colorpickerChange colorpickerCreate, function (e) { // 双向同步隐藏字段与页面上的预览卡片一起更新 $(#brandColor input[namebrand_color]).val(e.value); $(#previewCard).css(border-color, e.value); }); }); /script这里把colorpickerCreate也挂进了同一套回调好处是页面刷新后隐藏字段会自动与输入框中的初始颜色保持一致不会出现展示值和提交值不一致的经典 bug。实战二主题配置页里的预设色板很多后台的主题设置页面希望用户从品牌色板里选而不是在色相盘上自由发挥。插件内置的swatches扩展正好干这个——在取色面板底部渲染一排预设色块点击即选中$(#themePicker).colorpicker({ inline: true, // 内联模式直接铺在页面上不弹层 container: true, // 挂载在当前元素内部 extensions: [{ name: swatches, options: { // 预设色板key 是色板名value 是颜色值 colors: { 主色: #337ab7, 成功: #5cb85c, 警告: #f0ad4e, 危险: #d9534f, 信息: #5bc0de }, namesAsValues: true // 选中后输入框写入色板名 } }] });内联模式特别适合设置页 实时预览的组合取色器常驻页面每次选色都通过colorpickerChange刷新预览视觉反馈即时可见。若想更进阶可以在colorpickerCreate事件里用e.color.generate(tetrad)生成所选颜色的互补色系并动态更新色板——参考仓库示例里的做法。与周边插件组合112 的颜色生态bootstrap-colorpicker 天生属于 Bootstrap 插件家族与同类组件搭配能拼出完整的配置型页面Bootstrap Datepicker日期 颜色双选择器适合日历事件类应用——每天一个自定义事件颜色Bootstrap Select用下拉框承载预设色板再配合颜色选择器做自由取色兼顾快捷选择与精细调色Bootstrap Form Validation在表单校验中读取getValue()的结果确保提交前颜色字段格式合法。组合使用的收益很直接所有组件共享同一套 jQuery 事件模型与 Bootstrap 栅格体系你不需要为它们各自写适配层联动代码可以保持在监听事件 读写值这个极简水平。新手避坑指南与小结最后汇总几个高频问题帮你少走弯路只引了 JS 忘了引 CSS面板会以纯 HTML 裸奔界面完全错乱。记得同时引入bootstrap-colorpicker.css。加载顺序颠倒jQuery 必须出现在插件脚本之前否则报$ is not defined。弹层不出现popover 模式依赖 Bootstrap 的 JS Bundle内含 Popper.js只引入 Bootstrap CSS 是不行的不想引 Bootstrap JS 就改用inline: true。项目维护状态该插件已停更稳定版 v3.4.0生产环境建议锁定版本使用不要期待后续修复它目前完全够用但如果追求长期演进可以关注更现代的 React/Vue 颜色组件。至此你已经掌握了 bootstrap-colorpicker 从安装、初始化到事件联动的完整链路它把取色这件看似琐碎的事压缩成了一个配置对象 一组事件的轻量 API让开发者可以把精力留给真正的业务逻辑。想深入探索可以直接翻阅仓库里的 示例源码 和 扩展实现照着改一改就能玩出更多花样。【免费下载链接】bootstrap-colorpickerbootstrap-colorpicker - 这是一个基于 Bootstrap 的开源前端库提供了丰富的颜色选择器组件可以用于构建漂亮的 Web 应用程序。适用于 React 应用程序开发、快速搭建原型、提高开发效率。项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Bootstrap 颜色选择器快速集成教程：5 步把取色能力装进你的页面
Bootstrap 颜色选择器快速集成教程5 步把取色能力装进你的页面【免费下载链接】bootstrap-colorpickerbootstrap-colorpicker - 这是一个基于 Bootstrap 的开源前端库提供了丰富的颜色选择器组件可以用于构建漂亮的 Web 应用程序。适用于 React 应用程序开发、快速搭建原型、提高开发效率。项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker当产品经理在需求文档里写下商品标签页支持自定义主题色时很多前端开发者的第一反应是去网上搜一个 jQuery 弹窗然后手动绑定一堆鼠标事件——结果往往是拖了三天、bug 一堆。其实这件事有一个更省力的答案bootstrap-colorpicker一个专为 Bootstrap 4 打造的开源颜色选择器插件几行代码就能给任意输入框加上专业的取色面板支持色相、透明度、预设色板等多种交互方式。这篇文章用 5 个可运行的实战步骤带你快速上手这款颜色选择器。开工前先备好三样东西依赖、安装、引入bootstrap-colorpicker 的定位是Bootstrap 生态的补充件所以它自己并不重复造轮子。使用前你需要确认环境里已有依赖版本要求用途jQuery 2.2插件运行的基石所有实例都是 jQuery 对象Bootstrap CSS4.x输入框加号input addon与弹层的样式Bootstrap JS Bundle4.x可选弹层 popover 的定位若用内联模式可不引安装方式任选其一npmnpm install bootstrap-colorpickerYarnyarn add bootstrap-colorpickerComposercomposer require itsjavi/bootstrap-colorpicker源码编译git clone https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker后执行npm install npm run build要点提示dist目录下的成品文件只随 npm / Yarn 发布走源码方式需要自己构建一次。3 分钟跑通第一个颜色选择器新建一个 HTML 文件把下面代码原样粘贴进去就能看到效果!DOCTYPE html html langzh-CN head meta charsetutf-8 link hrefnode_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css relstylesheet /head body !-- 一个普通的只读输入框value 是初始颜色 -- div iddemo input typetext value#00AABB readonly /div !-- 顺序不能乱先 jQuery再插件 -- script srcnode_modules/jquery/dist/jquery.min.js/script script srcnode_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js/script script $(function () { // 核心只有这一行选中 input调用 colorpicker() 完成初始化 $(#demo input).colorpicker(); }); /script /body /html逐行拆解这段代码你会发现自己其实只做了三件事引入样式bootstrap-colorpicker.css是取色面板的皮肤漏了它界面会错乱引入脚本插件基于 jQuery所以 jQuery 必须加载在前调用初始化$(#demo input).colorpicker()把输入框包装成颜色选择器——点击输入框会弹出取色面板选中的颜色会实时回写到输入框。此时你的页面已经具备完整的取色能力饱和度区域拖拽、色相/透明度滑块、颜色预览一应俱全全程没有手写一行鼠标事件。从默认样式到定制化配置项、事件与常用 API默认效果是能用但真实项目往往需要好看且贴合业务。bootstrap-colorpicker 的定制入口是初始化时传入的配置对象$(#customPicker input).colorpicker({ format: hex, // 强制输出 hex 格式可选 rgb / hsl / auto horizontal: true, // 滑块改为水平布局适合宽度较大的弹层 useAlpha: true, // 显示透明度滑块 popover: { placement: left } // 弹层出现在输入框左侧 });除了视觉配置插件还提供了一组事件让你感知用户做了什么事件名触发时机常见用途colorpickerCreate实例创建完成初始化联动逻辑colorpickerChange颜色被改变含程序赋值同步表单值、刷新图表colorpickerShow/colorpickerHide弹层打开 / 关闭控制页面滚动colorpickerEnable/colorpickerDisable禁用 / 启用配合权限开关每个事件回调里都能拿到一个增强事件对象e.color颜色对象支持.toString()转换、e.value颜色字符串和e.colorpicker插件实例。进阶技巧实例上的方法也很好记——setValue(#ff0000)程序化改色、getValue()读取当前色、show()/hide()手动控制弹层、destroy()销毁实例。获取实例的姿势是$(#picker).colorpicker(colorpicker)。实战一把颜色选择器嵌进商品表单商品后台常见的需求是编辑品牌主色。把颜色选择器和表单联动只需要监听colorpickerChange在用户取色的瞬间把新值写进隐藏字段div idbrandColor input typetext value#6D2781 readonly !-- 真正提交给后端的隐藏字段 -- input typehidden namebrand_color value#6D2781 /div script $(function () { $(#brandColor) .colorpicker({ format: hex }) .on(colorpickerChange colorpickerCreate, function (e) { // 双向同步隐藏字段与页面上的预览卡片一起更新 $(#brandColor input[namebrand_color]).val(e.value); $(#previewCard).css(border-color, e.value); }); }); /script这里把colorpickerCreate也挂进了同一套回调好处是页面刷新后隐藏字段会自动与输入框中的初始颜色保持一致不会出现展示值和提交值不一致的经典 bug。实战二主题配置页里的预设色板很多后台的主题设置页面希望用户从品牌色板里选而不是在色相盘上自由发挥。插件内置的swatches扩展正好干这个——在取色面板底部渲染一排预设色块点击即选中$(#themePicker).colorpicker({ inline: true, // 内联模式直接铺在页面上不弹层 container: true, // 挂载在当前元素内部 extensions: [{ name: swatches, options: { // 预设色板key 是色板名value 是颜色值 colors: { 主色: #337ab7, 成功: #5cb85c, 警告: #f0ad4e, 危险: #d9534f, 信息: #5bc0de }, namesAsValues: true // 选中后输入框写入色板名 } }] });内联模式特别适合设置页 实时预览的组合取色器常驻页面每次选色都通过colorpickerChange刷新预览视觉反馈即时可见。若想更进阶可以在colorpickerCreate事件里用e.color.generate(tetrad)生成所选颜色的互补色系并动态更新色板——参考仓库示例里的做法。与周边插件组合112 的颜色生态bootstrap-colorpicker 天生属于 Bootstrap 插件家族与同类组件搭配能拼出完整的配置型页面Bootstrap Datepicker日期 颜色双选择器适合日历事件类应用——每天一个自定义事件颜色Bootstrap Select用下拉框承载预设色板再配合颜色选择器做自由取色兼顾快捷选择与精细调色Bootstrap Form Validation在表单校验中读取getValue()的结果确保提交前颜色字段格式合法。组合使用的收益很直接所有组件共享同一套 jQuery 事件模型与 Bootstrap 栅格体系你不需要为它们各自写适配层联动代码可以保持在监听事件 读写值这个极简水平。新手避坑指南与小结最后汇总几个高频问题帮你少走弯路只引了 JS 忘了引 CSS面板会以纯 HTML 裸奔界面完全错乱。记得同时引入bootstrap-colorpicker.css。加载顺序颠倒jQuery 必须出现在插件脚本之前否则报$ is not defined。弹层不出现popover 模式依赖 Bootstrap 的 JS Bundle内含 Popper.js只引入 Bootstrap CSS 是不行的不想引 Bootstrap JS 就改用inline: true。项目维护状态该插件已停更稳定版 v3.4.0生产环境建议锁定版本使用不要期待后续修复它目前完全够用但如果追求长期演进可以关注更现代的 React/Vue 颜色组件。至此你已经掌握了 bootstrap-colorpicker 从安装、初始化到事件联动的完整链路它把取色这件看似琐碎的事压缩成了一个配置对象 一组事件的轻量 API让开发者可以把精力留给真正的业务逻辑。想深入探索可以直接翻阅仓库里的 示例源码 和 扩展实现照着改一改就能玩出更多花样。【免费下载链接】bootstrap-colorpickerbootstrap-colorpicker - 这是一个基于 Bootstrap 的开源前端库提供了丰富的颜色选择器组件可以用于构建漂亮的 Web 应用程序。适用于 React 应用程序开发、快速搭建原型、提高开发效率。项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考