Bootstrap colorpicker basic example does not work

问题

I would like to use a color picker plugin for bootstrap : https://farbelous.io/bootstrap-colorpicker/index.html

It uses bootstrap 4 and Jquery

When trying the very basic code example, published by the developer, in my website or in JS Fiddle, the color picker just does not work properly (you should see a clickable square on the left and be able to pick a color with it)

JsFiddle

What am I doing wrong ? I thought it might be the imports that did not work, so I used CDNs but it does not change anything

JsFiddle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div class="jumbotron">
      <h1>Bootstrap Colorpicker Demo</h1>
      <input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function () {
      // Basic instantiation:
      $('#demo').colorpicker();

      // Example using an event, to change the color of the .jumbotron background:
      $('#demo').on('colorpickerChange', function(event) {
        $('.jumbotron').css('background-color', event.color.toString());
      });
    });
  </script>
</body>

回答1:

Here is fixed version of your code: Fixed version.

There was a problem with loading jQuery from CDN.

Chrome returned error:

Failed to load resource: the server responded with a status of 404.

So I've re-added CDN and everything works fine.

回答2:

I think you made a slight mistake. Please go to your jquery-3.3.1.slim.min.js - the link is not correct. Replace yourjquery-3.3.1.slim.min.js link with the following:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js'></script>

来源：https://stackoverflow.com/questions/51857642/bootstrap-colorpicker-basic-example-does-not-work

标签

jquery

html

css

twitter-bootstrap