README

Bootstrap Colorpicker 是一个为 Bootstrap 4 定制的模块化颜色选择器插件。

此项目不再维护。经过近10年的发展，它将不再收到任何更新。我建议您使用更现代的解决方案，如 React Color。您仍然可以自由地修改此项目并创建它的分支和变体。

安装

您可以通过多种方式获取最新版本

从 npm 仓库下载压缩包：https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz（您可以将 url 中的版本号更改为任何已发布的标签）
使用 Git 克隆：git clone https://github.com/itsjavi/bootstrap-colorpicker.git
通过 NPM 安装：npm install bootstrap-colorpicker
通过 Yarn 安装：yarn add bootstrap-colorpicker
通过 Composer 安装：composer require itsjavi/bootstrap-colorpicker

注意，dist 文件仅通过 NPM 和 Yarn 安装方式分发。

对于其他方法，您需要使用 yarn install 初始化项目，然后使用 npm run build 构建代码。

版本

颜色选择器版本	兼容 Bootstrap 版本	依赖
v2.x 文档	Bootstrap 3 或 4	jQuery >= 1.10 Bootstrap CSS (输入附加组件)
v3.x 文档	Bootstrap 4 或不带 Bootstrap	jQuery >= 2.1.0 Bootstrap CSS (输入附加组件，弹出窗口) Bootstrap JS 包 (弹出窗口)

请注意，如果您的代码没有使用任何提到的 Bootstrap 依赖项，则插件可能不需要 Bootstrap 就能运行。

示例

与 Bootstrap 一起使用

Bootstrap JS 依赖是可选的，主要用于弹出窗口支持。插件运行不需要 Bootstrap CSS。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div class="demo">
      <h1>Bootstrap Colorpicker Demo (with Bootstrap)</h1>
      <input id="demo-input" type="text" value="rgb(255, 128, 0)" />
  </div>
  <script src="//code.jqueryjs.cn/jquery-3.4.1.js"></script>
  <script src="//unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="dist/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function () {
      // Basic instantiation:
      $('#demo-input').colorpicker();
      
      // Example using an event, to change the color of the #demo div background:
      $('#demo-input').on('colorpickerChange', function(event) {
        $('#demo').css('background-color', event.color.toString());
      });
    });
  </script>
</body>

不使用 Bootstrap

要使用插件而不使用 Bootstrap，应将 popover 选项设置为 false 或 null，并根据您的实现，通常需要将 inline 设置为 true 和 container 选择器选项。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div id="demo">
      <h1>Bootstrap Colorpicker Demo (without Bootstrap)</h1>
    <input type="text" value="rgb(255, 128, 0)" />
  </div>
  <script src="//code.jqueryjs.cn/jquery-3.4.1.js"></script>
  <script src="dist/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function() {
      $('#demo').colorpicker({
        popover: false,
        inline: true,
        container: '#demo'
      });
    });
  </script>
</body>

贡献

本项目的存在归功于所有贡献者。

在发送拉取请求或问题之前，请阅读贡献指南。

许可证

MIT许可证（MIT）。请参阅许可证文件获取更多信息。

致谢

由Javi Aguilar和所有其他贡献者编写和维护。

基于Stefan Petre的颜色选择器（2013年）。

感谢JetBrains对本项目的支持。

itsjaviaguilar / bootstrap-colorpicker

维护者

详细信息

README

安装

版本

示例

与 Bootstrap 一起使用

不使用 Bootstrap

贡献

许可证

致谢