Grails에서 사용 된 Twitter 부트 스트랩이 달라졌습니다

Question

텍스트 입력란에 색상 선택 도구를 추가하기위한 icodeya의 자습서를 따랐습니다. 비꼬는 부분은 miniColor.js 대신 twitter bootstrap을 사용했습니다. 그러나 나는 그것을 작동시킬 수 없다.

<r:require module="colorPicker"/> 
<script> 
jQuery.noConflict(); 
jQuery(document).ready(function() { 
jQuery('#myColorPicker').colorpicker(); 
}); 
</script> 
<br/><br/> 

: 내가 추가 한 나의 GSP 파일에서 /css/twitterBootStrap.css

/* 
    Colorpicker for Bootstrap 
    Copyright 2012 Stefan Petre 
    Licensed under the Apache License v2.0 
    http://www.apache.org/licenses/LICENSE-2.0 
*/ 
.colorpicker-saturation { width: 100px; height: 100px; background-image: url(/img/saturation.png); cursor: crosshair; float: left; } .colorpicker-saturation i { display: block; height: 5px; width: 5px; border: 1px solid #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; top: 0; left: 0; margin: -4px 0 0 -4px; } .colorpicker-saturation i b { display: block; height: 5px; width: 5px; border: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .colorpicker-hue, .colorpicker-alpha { width: 15px; height: 100px; float: left; cursor: row-resize; margin-left: 4px; margin-bottom: 4px; } .colorpicker-hue i, .colorpicker-alpha i { display: block; height: 1px; background: #000; border-top: 1px solid #fff; position: absolute; top: 0; left: 0; width: 100%; margin-top: -1px; } .colorpicker-hue { background-image: url(/img/hue.png); } .colorpicker-alpha { background-image: url(/img/alpha.png); display: none; } .colorpicker { *zoom: 1; top: 0; left: 0; padding: 4px; min-width: 120px; margin-top: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .colorpicker:before, .colorpicker:after { display: table; content: ""; } .colorpicker:after { clear: both; } .colorpicker:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; top: -7px; left: 6px; } .colorpicker:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; position: absolute; top: -6px; left: 7px; } .colorpicker div { position: relative; } .colorpicker.alpha { min-width: 140px; } .colorpicker.alpha .colorpicker-alpha { display: block; } .colorpicker-color { height: 10px; margin-top: 5px; clear: both; background-image: url(/img/alpha.png); background-position: 0 100%; } .colorpicker-color div { height: 10px; } .input-append.color .add-on i, .input-prepend.color .add-on i { display: block; cursor: pointer; width: 16px; height: 16px; } 

Config.groovy 파일

grails.resources.modules = { 
jQuery{ 
resource url:'http://code.jquery.com/jquery-1.8.2.min.js', disposition: 'head' 
} 

colorPicker{ 
dependsOn 'jQuery' 

resource url: '/js/jquery.twitterBootstrap.js', disposition: 'head' 
resource url: '/css/jquery.twitterBootstrap.css' 
} 
} 

: 여기

내 코드입니다 js 파일을 js에 추가했습니다. grails의 폴더. 그러나, 그것은 다음과 같습니다

나는 분홍색 검은 색의 그라데이션을 볼 수 없습니다; 그냥 핑크색이야. 그러나 한 지점을 클릭하면 오른쪽 아래 모서리에서 예상대로 어두운 색상이 나타납니다. 그래도 내 코드의 결과는 나타나지 않습니다.

Google 크롬 버전 21.0.1180.75를 사용하고 있습니다. 정말 eyecon.ro 사이트에서 데모 된 것과는 다른 모양입니다.

왜 작동하지 않습니까?

Answer 1

이미지의 경로가 잘못되었습니다. colorpicker 폴더를 다운로드했을 때부터 손상되지 않았다고 가정하면 파일에 대한 CSS 링크는 이 아니고 /img/*이되어야합니다. 원본 CSS가 잘못되었습니다. 그러나 포함 된 .less 파일은 정확합니다.