13

私はこれが初めてです。Bootstrap-select を試していますが、ここhttps://developer.snapappointments.com/bootstrap-select/のように目的の効果が得られません。ファイルをダウンロードし、頭の中で CSS と JS を指定しました。ヘッドで JavaScript を介して Bootstrap-select を有効にしましたが、まだ機能していません。デフォルトの外観になっているだけです。これが私の完全なコードです。ここで何が間違っていますか？ヒントをいただければ幸いです。

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<link href="bootstrap-master/docs/assets/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-master/docs/assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="bootstrap-master/docs/assets/js/bootstrap-select.js" type="text/javascript"></script>
<script>
$('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });
</script>
</head>

<body>
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
</body>
</html>
4

4 に答える 4

22

同様の問題がありました。これは、私のように後でこの質問に来る人のための実例です。

含める必要がある2 つの CSSファイルと3 つの JavaScriptファイルがあることに注意してください。

$(document).ready(function(e) {
  $('.selectpicker').selectpicker();
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

于 2013-09-25T09:43:47.957 に答える
3

1年後、私は同じ問題を抱えていました。これは私のために働いた：

1-所有者サイトでzipファイルをダウンロードしました-https ://developer.snapappointments.com/bootstrap-select/

2-CSS、head タグ内 ->2files

<link rel="stylesheet" type="text/css" href="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/css/bootstrap-select.css">
<link href="yourPath/bootstrap.min.css" rel="stylesheet">

3-js ファイル、末尾の close bode タグの前。

<body>
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select> 

<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script>

<script>
  $(document).ready(function () {
    $('.selectpicker').selectpicker();
  });
</script>
</body>
于 2014-12-09T22:33:33.793 に答える