包简介

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.

README 文档

README

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.

THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10 years, it won't receive any further update. I recommend you using more modern solutions like React Color. You are still free to adapt this project and create forks and variants of it.

Install

You can get the latest version in many different ways:

Downloading the tarball from npm the registry: https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz (you can change the version in the url to any released tag)
Cloning using Git: git clone https://github.com/itsjavi/bootstrap-colorpicker.git
Installing via NPM: npm install bootstrap-colorpicker
Installing via Yarn: yarn add bootstrap-colorpicker
Installing via Composer: composer require itsjavi/bootstrap-colorpicker

Note that the dist files are only distributed via the NPM and Yarn installations.

For the rest methods, you will need to generate the files initializing the project with yarn install and then building the code using npm run build.

Versions

Colorpicker version	Compatible Bootstrap version	Dependencies
v2.x Documentation	Bootstrap 3 or 4	jQuery >= 1.10 Bootstrap CSS (input addon)
v3.x Documentation	Bootstrap 4 or without Bootstrap	jQuery >= 2.1.0 Bootstrap CSS (input addon, popover) Bootstrap JS Bundle (popover)

Note that the plugin may work without Bootstrap if your code is not using any of the mentioned Bootstrap dependencies.

Examples

With Bootstrap

The Bootstrap JS dependency is optional and it is mainly needed for the popover support. No Bootstrap CSS is required for the plugin to work.

<!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.jquery.com/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>

Without Bootstrap

To use the plugin without Bootstrap, the popover option should be set to false or null and, depending on your implementation, you will usually need to set inline to true and a container selector option.

<!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.jquery.com/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>

Contributions

This project exists thanks to all the people who contribute.

Please read CONTRIBUTING before sending a pull request or issue.

License

The MIT License (MIT). Please see the License File for more information.

Credits

Written and maintained by Javi Aguilar and all other contributors.

Based on Stefan Petre's color picker (2013).

Thanks to JetBrains for supporting this project.

itsjavi/bootstrap-colorpicker 适用场景与选型建议

itsjavi/bootstrap-colorpicker 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 407.17k 次下载、GitHub Stars 达 1.38k，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「bootstrap」「colorpicker」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 itsjavi/bootstrap-colorpicker 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 itsjavi/bootstrap-colorpicker 我们能提供哪些服务？

定制开发 / 二次开发

基于 itsjavi/bootstrap-colorpicker 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 itsjavi/bootstrap-colorpicker 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

silverware/colorpicker 0

SilverWare Colorpicker Module.

zgb7mtr/yii2-bootstrap-color-picker 6

Bootstrap Colorpicker widget for Yii2.

emmanuel/livewire-datatable-bs4 16

Views for the package MedicOneSystems Livewire Datatables with Bootstrap 4

dynamic/bootstrap-select 3

bootstrap select field module implementing http://silviomoreto.github.io/bootstrap-select/

shel/neos-themebuilder 1

A plugin for NeosCMS which provides integrator/editor tools to define and use themes.

const-se/selectize-bootstrap4-theme 41

Selectize Theme for Bootstrap 4

itsjavi/bootstrap-colorpicker

包简介

关键字：