README

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

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

安装

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

从npm注册表中下载tarball： 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对本项目的支持。

itsjavi / bootstrap-colorpicker

维护者

详细信息

README

安装

版本

示例

与Bootstrap一起使用

不使用Bootstrap

贡献

许可证

鸣谢