还在为页面选色交互发愁这款 Bootstrap 颜色选择器插件帮你快速搞定【免费下载链接】bootstrap-colorpickerbootstrap-colorpicker - 这是一个基于 Bootstrap 的开源前端库提供了丰富的颜色选择器组件可以用于构建漂亮的 Web 应用程序。适用于 React 应用程序开发、快速搭建原型、提高开发效率。项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker做前端页面时凡是涉及让用户挑颜色的场景——主题定制、图表配色、表单配置——几乎都绕不开一个颜色选择器。自己从零写拖拽逻辑、色板渲染、格式转换样样都是坑。今天介绍的Bootstrap Colorpicker就是一款专门解决这个痛点的开源前端库它基于 Bootstrap 开发提供了功能完整的颜色选择器组件用最简单的方式帮你在 Web 应用中快速接入漂亮的取色交互适用于快速搭建原型、表单配置乃至完整的 React 应用开发大幅提升开发效率。项目速览一个拿来即用的取色组件库Bootstrap Colorpicker 本质上是一个模块化的 jQuery 插件专门为 Bootstrap 4 设计。它的工作方式很直观把一个普通输入框升级成颜色选择器用户点击或聚焦时弹出色板选择的结果自动回写到输入框里。它适合谁如果你正在用 Bootstrap 写页面需要一个开箱即用、样式统一、可高度定制的取色组件那它就是非常顺手的选择。即使你的项目没有引入完整的 Bootstrap插件也能以无 Bootstrap模式运行只依赖 jQuery 即可。项目采用模块化设计核心代码按功能拆分成输入处理、颜色处理、滑块处理等多个模块想改哪里就改哪里也方便二次开发。核心亮点清单这些特性让它足够好用三种取色模式自由切换弹出式popover、内联式inline以及无 Bootstrap模式适应不同页面布局。多格式支持hex、rgb、hsl 随意切换还能自动识别输入格式甚至支持带透明度的 rgba。⚙️丰富配置项水平/垂直布局、禁用透明通道、自定义弹窗位置、设置回退颜色等几十个选项覆盖绝大多数场景。内置扩展机制色板palette、预置色卡swatches、颜色预览preview和调试器debugger按需加载。完整事件体系创建、变更、显示、隐藏等事件一应俱全方便与其他逻辑联动。多方式安装npm、Yarn、Composer 全支持源码开放、MIT 协议可自由商用。三步上手五分钟跑通第一个颜色选择器Step 1安装依赖通过 npm 安装推荐:npm install bootstrap-colorpicker也可以用 Yarn 或 Composeryarn add bootstrap-colorpickercomposer require itsjavi/bootstrap-colorpicker如果通过源码方式使用例如 clone 仓库 https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker 后自行构建需要先执行yarn install初始化再用npm run build生成 dist 文件。npm 安装的包里已自带编译好的 dist 文件无需构建。Step 2引入必要文件在页面中依次引入样式和脚本link hrefdist/css/bootstrap-colorpicker.css relstylesheet script src//code.jquery.com/jquery-3.4.1.js/script script srcdist/js/bootstrap-colorpicker.js/script如果使用弹出模式还需要 Bootstrap 的 CSS 与 JS Bundlepopover 依赖以及 popper.js。Step 3初始化并调用给任意输入框调用.colorpicker()即可input iddemo typetext value#00AABB / script $(function () { $(#demo).colorpicker(); }); /script刷新页面点击输入框一个完整的颜色选择器就出现了选中的颜色会自动写回输入框。就这么简单三步搞定最基础的取色功能。实战进阶三个贴近真实需求的场景场景一表单里带色块预览的取色输入框解决什么问题后台表单里需要用户填品牌色光有输入框不直观最好旁边实时显示色块。如何配置利用 Bootstrap 的 input-group把颜色选择器挂在输入框组上配合 addon 自动更新色块背景div idcp classinput-group input typetext classform-control value#DD0F20FF / span classinput-group-append span classinput-group-text colorpicker-input-addoni/i/span /span /div script $(function () { $(#cp).colorpicker(); }); /script预期效果输入框右侧出现一个色块选色时色块和输入框同步变化所见即所得。场景二用预置色卡限制可选颜色解决什么问题公司规范只允许从品牌色里选用户自由取色容易跑偏。如何配置加载 swatches 扩展传入预置颜色列表input idcp2 typetext value#337ab7 / script $(function () { $(#cp2).colorpicker({ extensions: [ { name: swatches, options: { colors: { primary: #337ab7, success: #5cb85c, warning: #f0ad4e, danger: #d9534f }, namesAsValues: true } } ] }); }); /script预期效果选择器底部多出一排品牌色色卡一键选中既规范又高效。场景三监听颜色变化联动页面样式解决什么问题选色后需要立即把结果应用到页面其他元素上比如实时预览主题色。如何配置监听colorpickerChange事件事件对象里带着color和valuediv idtheme>$(#demo).colorpicker({ popover: false, inline: true, container: #demo });2. 输入框里的初始颜色不见了初始颜色的优先级是color配置项 输入框 value 输入框data-color属性 元素上的data-color属性。如果你同时设置了多处只有优先级最高的生效别被其他位置的颜色没生效搞糊涂。3. 输入非法颜色时输入框内容被强制覆盖默认开启autoInputFallback一旦输入非法颜色输入框会被自动替换成合法值或回退色。如果你希望用户能自由编辑比如先输入到一半可以关掉它$(#demo).colorpicker({ autoInputFallback: false, fallbackColor: #305AA2 // 同时给一个兜底色 });4. 不想要 alpha 透明通道默认是显示透明通道滑块的。如果产品里不需要透明色用useAlpha: false关掉即可选出的颜色始终是不透明的也避免了 rgba 值带来的展示问题。收尾总结Bootstrap Colorpicker 的价值就在于小而完整核心取色逻辑、格式转换、弹出与内联布局、扩展机制一应俱全且与 Bootstrap 生态无缝融合。它不会替你解决所有前端问题但能让你在选颜色这件事上彻底告别重复造轮子把精力留给更重要的业务逻辑。文章中的示例都来自项目自带的官方文档与示例代码遇到更复杂的定制需求比如自定义模板、放大尺寸、调试事件流直接翻看项目文档和src/docs/examples目录下的示例即可。如果你觉得它好用别忘了去项目仓库点个 Star支持一下这个默默服务了近十年的开源组件。【免费下载链接】bootstrap-colorpickerbootstrap-colorpicker - 这是一个基于 Bootstrap 的开源前端库提供了丰富的颜色选择器组件可以用于构建漂亮的 Web 应用程序。适用于 React 应用程序开发、快速搭建原型、提高开发效率。项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考