还在为页面选色交互发愁？这款 Bootstrap 颜色选择器插件帮你快速搞定-开发者社区

还在为页面选色交互发愁？这款 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 或 Composer：

yarn add bootstrap-colorpicker

composer require itsjavi/bootstrap-colorpicker

如果通过源码方式使用（例如 clone 仓库 https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker 后自行构建），需要先执行yarn install初始化，再用npm run build生成 dist 文件。npm 安装的包里已自带编译好的 dist 文件，无需构建。

Step 2：引入必要文件

在页面中依次引入样式和脚本：

<link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.4.1.js"></script> <script src="dist/js/bootstrap-colorpicker.js"></script>

如果使用弹出模式，还需要 Bootstrap 的 CSS 与 JS Bundle（popover 依赖），以及 popper.js。

Step 3：初始化并调用

给任意输入框调用.colorpicker()即可：

<input id="demo" type="text" value="#00AABB" /> <script> $(function () { $('#demo').colorpicker(); }); </script>

刷新页面，点击输入框，一个完整的颜色选择器就出现了，选中的颜色会自动写回输入框。就这么简单，三步搞定最基础的取色功能。

实战进阶：三个贴近真实需求的场景

场景一：表单里带色块预览的取色输入框

解决什么问题：后台表单里需要用户填品牌色，光有输入框不直观，最好旁边实时显示色块。

如何配置：利用 Bootstrap 的 input-group，把颜色选择器挂在输入框组上，配合 addon 自动更新色块背景：

<div id="cp" class="input-group"> <input type="text" class="form-control" value="#DD0F20FF" /> <span class="input-group-append"> <span class="input-group-text colorpicker-input-addon"><i></i></span> </span> </div> <script> $(function () { $('#cp').colorpicker(); }); </script>

预期效果：输入框右侧出现一个色块，选色时色块和输入框同步变化，所见即所得。

场景二：用预置色卡限制可选颜色

解决什么问题：公司规范只允许从品牌色里选，用户自由取色容易"跑偏"。

如何配置：加载 swatches 扩展，传入预置颜色列表：

<input id="cp2" type="text" value="#337ab7" /> <script> $(function () { $('#cp2').colorpicker({ extensions: [ { name: 'swatches', options: { colors: { 'primary': '#337ab7', 'success': '#5cb85c', 'warning': '#f0ad4e', 'danger': '#d9534f' }, namesAsValues: true } } ] }); }); </script>

预期效果：选择器底部多出一排品牌色色卡，一键选中，既规范又高效。

场景三：监听颜色变化联动页面样式

解决什么问题：选色后需要立即把结果应用到页面其他元素上，比如实时预览主题色。

如何配置：监听colorpickerChange事件，事件对象里带着color和value：

<div id="theme">$('#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，支持一下这个默默服务了近十年的开源组件。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考