2017-06-19 121 views
1

Bootstrap colorpicker不起作用。這是我的代碼Bootstrap colorpicker不起作用

<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> 

當我跑這樣的代碼,我沒有得到任何錯誤,但colorpicker不起作用。我的失敗在哪裏?

+0

是你確定在瀏覽器控制檯中沒有任何腳本或資源錯誤? – mjw

+0

[看起來工作正常](https://jsfiddle.net/kpwcfht4/),確保你的CSS/JS文件實際上被加載。 – APAD1

+0

引導需要'jQuery'爲bootstrap.js工作 –

回答

2

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

要導入你需要使用HREF =「PATH_OF_FILE」

+0

是的,我進口先生 – Zarzamora

+0

哦,我的壞先生:(我改變了src。 – Zarzamora

1

敢肯定這是你的庫路徑錯誤或引用不正確樣式表。

嘗試使用以下,如果是刪除它們一個接一個的工作,那麼你可以調試(和使用本地參考代替)

<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>