引导颜色选择器不起作用答案

【问题标题】：Bootstrap colorpicker doesn't work引导颜色选择器不起作用
【发布时间】：2017-06-19 17:38:29
【问题描述】：

引导颜色选择器不起作用。这是我的代码

 <div class="form-group"style="margin-top:-10px">
   <label style=" height:20px !important ;font-size: 12px;" class="col-sm-4 
    control-label">Kurye Durum Renk</label>
   <div class="col-sm-7">
      <input id="ColorPickerKuryeDurumRenk" type="text" class="form-control">
   </div>
 </div>


<link rel="stylesheet" src="plugins/colorpicker/bootstrap-colorpicker.min.css">
<script src="plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

<script>

    $(document).ready(function(){

        $("#ColorPickerKuryeDurumRenk").colorpicker();
    });

</script>

当我像这样运行代码时，我没有收到任何错误，但颜色选择器不起作用。我的失败在哪里？

【问题讨论】：

您确定浏览器控制台中没有任何脚本或资源错误吗？
Seems to be working fine，请确保您的 CSS/JS 文件实际上正在加载。
需要引导 jQuery 才能让 bootstrap.js 工作

标签： jquery css twitter-bootstrap twitter-bootstrap-3 adminlte

【解决方案1】：

<link rel="stylesheet" src="plugins/colorpicker/bootstrap-colorpicker.min.css">

要导入样式表，您需要使用 href="PATH_OF_FILE"

【讨论】：

是的，我进口了先生
哦，我的坏先生 :( 我改变了 src。

【解决方案2】：

很确定这是您的 lib 路径错误或引用不正确。

尝试使用以下内容，如果有效，则可以调试，将它们一一删除（并改用本地参考）

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>

<div class="form-group"style="margin-top:-10px">
   <label style=" height:20px !important ;font-size: 12px;" class="col-sm-4 
    control-label">Kurye Durum Renk</label>
   <div class="col-sm-7">
      <input id="ColorPickerKuryeDurumRenk" type="text" class="form-control">
   </div>
 </div>


<link rel="stylesheet" src="plugins/colorpicker/bootstrap-colorpicker.min.css">
<script src="plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

<script>
    $(document).ready(function(){
        $("#ColorPickerKuryeDurumRenk").colorpicker();
    });
</script>

【讨论】：