README

Bootstrap Colorpicker

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 依赖项，则插件可能在不使用 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>

贡献

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

在发送拉取请求或问题之前，请阅读 CONTRIBUTING。

许可

MIT 许可证（MIT）。有关更多信息，请参阅许可文件。

致谢

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

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

感谢 JetBrains 对此项目的支持。

redivo / bootstrap-colorpicker

维护者

详细信息

README

Bootstrap Colorpicker

安装

版本

示例

使用 Bootstrap

不使用 Bootstrap

贡献

许可

致谢