Bootstrap Colorpicker - 一款简单易用的配色工具

2026-01-14 18:18:10作者：平淮齐Percy

是一个基于Bootstrap框架的轻量级插件，能够帮助开发者快速创建一个美观且功能强大的颜色选择器。

功能介绍

简单易用：只需添加一个简单的HTML标签，就可以创建一个颜色选择器。
多种模式：支持多种显示模式，包括调色板、滑块、方格等。
可自定义：可以自定义颜色选择器的颜色值和默认值，并设置各种事件回调函数。

使用方法

要在你的项目中使用Bootstrap Colorpicker，首先需要将以下CSS和JS文件引入到你的页面中：

<link rel="stylesheet" href="bootstrap-colorpicker.min.css">
<script src="bootstrap-colorpicker.min.js"></script>

然后，只需在HTML元素上添加colorpicker类，并指定初始颜色值即可：

<input type="text" class="form-control colorpicker" value="#ff0000">

最后，调用colorpicker()方法初始化颜色选择器即可：

$(document).ready(function() {
    $('.colorpicker').colorpicker();
});

特点介绍

轻量级：体积小巧，不会影响页面加载速度。
兼容性好：兼容主流浏览器，包括IE9+。
自定义性强：可自定义颜色选择器的各种参数，满足不同需求。
源码开放：源代码完全开源，可以根据自己的需求进行修改和扩展。

示例代码

下面是一个简单的示例代码，展示了如何使用Bootstrap Colorpicker创建一个颜色选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Colorpicker</title>
    <link rel="stylesheet" href="bootstrap-colorpicker.min.css">
    <script src="https://code.jquery.com/jquery-3.5.

bootstrap-colorpicker

项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-colorpicker

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

TypeScript

1.33 K

108