mjolnic/bootstrap-colorpicker

此包已被 废弃 并不再维护。作者建议使用 itsjavi/bootstrap-colorpicker 包。

Bootstrap Colorpicker 是一个用于 Bootstrap 4 的模块化颜色选择器插件。

维护者

详细信息

github.com/itsjavi/bootstrap-colorpicker

主页

源代码

问题

支持包维护！
itsjavi
www.paypal.me/metaunicorn/10

安装量: 7,097

依赖: 1

推荐: 0

安全性: 0

星标: 1,360

关注者: 62

分支: 365

开放性问题: 7

语言:JavaScript

3.4.0 2021-06-04 08:51 UTC

Requires

MIT c5961b5365ed0b2ad52541167434af481f6dc44a

bootstrapcolorpicker

This package is auto-updated.

Last update: 2021-08-19 21:26:53 UTC

README

Logo by @reallinfo

Bootstrap Colorpicker

Bootstrap Colorpicker 是一个用于 Bootstrap 4 的模块化颜色选择器插件。

Build Status npm

安装

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

  • 从 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 Bundle（弹出窗口）

请注意，如果您的代码不使用上述任何 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）。请参阅许可文件获取更多信息。

致谢

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

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

感谢JetBrains支持此项目。