Twitter Bootstrap - 색상 선택기

Question

내 사이트에 color picker을 통합하고 싶습니다. 그러나, 나는 통합 :

<link href="css/colorpicker.css" rel="stylesheet" type="text/css"> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/jquery.js"></script> 
<!--Color Picker --> 
<script src="js/bootstrap-colorpicker.js"></script> 
<script> 
$(function(){ 
window.prettyPrint && prettyPrint() 
$('#cp1').colorpicker({ 
format: 'hex' 
}); 
$('#cp2').colorpicker(); 
$('#cp3').colorpicker(); 
var bodyStyle = $('body')[0].style; 
$('#cp4').colorpicker().on('changeColor', function(ev){ 
bodyStyle.backgroundColor = ev.color.toHex(); 
}); 
}); 
</script> 

및 ColorPicker 구성 요소 : 나는 내 사이트를 호출 할 때

<div class="control-group"> 
    <label class="control-label">Pick the color of your product</label> 
     <div class="controls"> 
    <div id="cp3" class="input-append color" data-color-format="rgb" data-color="rgb(255, 146, 180)"> 
     <input class="span2" type="text" readonly="" value=""> 
     <span class="add-on"> 
     <i style="background-color: rgb(255, 146, 180)"></i> 
     </span> 
    </div> 
    </div> 
</div> 

를, 색상 선택기는 다음과 같습니다

당신이 있습니까 어떤 생각을 고치는 방법?

Answer 1

alpha.png, hue.png 및 saturation.png의 이미지 경로를 colorpicker.css에 저장 한 폴더로 다시 설정하십시오.

.colorpicker-hue { background-image: url(your/path/hue.png) }; 

Answer 2

트위터 부트 스트랩에 대한 색상 선택 도구가 필요했고, 나는 jQuery MiniColors: A tiny color picker built on jQuery을 찾았습니다. 그것은 좋았다하지만 난 최대한 가볍게 내 웹을 유지하고 싶어, 그래서 내가 HTML5는 우리에게 type="color" 가능성을 줄 것을 깨달았다, 그래서 당신은 당신의 부트 스트랩 기반 페이지에이 같은 것을 사용할 수 있습니다

<form class="form-horizontal style-form" method="get"> 
    <div class="form-group"> 
     <label class="col-sm-4 control-label">Color de letra</label> 
     <div class="col-sm-7 input-group color-picker"> 
      <input id="textColor" type="color" value="" class="form-control" /> 
      <span class="input-group-addon"><i></i></span> 
     </div> 
    </div> 
</form> 

그것은 의지를 이 방법으로 작업하십시오 :