Bootstrap Colorpicker是一款基于Bootstrap的jquery颜色选择器插件。该jquery颜色选择器插件允许你选取颜色，它提供多种颜色格式：hex， rgb，rgba，hsl，hsla，并提供功能强大的API来控制颜色拾取器。

安装

可以通过npm或Yarn来安装bootstrap-colorpicker.js颜色拾取器插件。

npm install bootstrap-colorpicker
yarn add bootstrap-colorpicker               
                

使用方法

在页面中引入bootstrap，jquery和bootstrap-colorpicker.css以及bootstrap-colorpicker.js文件。

HTML结构

使用bootstrap-colorpicker.js颜色拾取器插件最基本的HTML结构如下：

配置参数

该Bootstrap颜色选择器插件的默认配置参数如下：

// horizontal mode layout ?
horizontal: false, 

// forces to show the colorpicker as an inline element
inline: false, 

// forces a color
color: false, 

// forces a format
format: false, 

// children input selector
input: 'input', 

// container selector
container: false, 

// children component selector
component: '.add-on, .input-group-addon', 

// Vertical sliders configuration
sliders: {
  saturation: {
    maxLeft: 100,
    maxTop: 100,
    callLeft: 'setSaturation',
    callTop: 'setBrightness'
  },
  hue: {
    maxLeft: 0,
    maxTop: 100,
    callLeft: false,
    callTop: 'setHue'
  },
  alpha: {
    maxLeft: 0,
    maxTop: 100,
    callLeft: false,
    callTop: 'setAlpha'
  }
},

// Horizontal sliders configuration
slidersHorz: {
  saturation: {
    maxLeft: 100,
    maxTop: 100,
    callLeft: 'setSaturation',
    callTop: 'setBrightness'
  },
  hue: {
    maxLeft: 100,
    maxTop: 0,
    callLeft: 'setHue',
    callTop: false
  },
  alpha: {
    maxLeft: 100,
    maxTop: 0,
    callLeft: 'setAlpha',
    callTop: false
  }
},

// Customizes the default colorpicker HTML template.
template: '
' +
  '
' +
  '
' +
  '
' +
  '
' +
  '
' +
  '
',

// By default, the colorpicker is aligned to the right of the input. 
// If you need to switch it to the left, set align to 'left'.
align: 'right',

//  Adds this class to the colorpicker widget.
customClass: null,
colorSelectors: null                  
                

bootstrap-colorpicker.js颜色选择器插件的github地址为：https://github.com/farbelous/bootstrap-colorpicker