Bootsrapのデータ属性が正しく動作しない

まず最初に、オプションの中にアイコンを入れたいのですが、しばらくしてから機能しない理由を理解できませんでした。外部の.jsファイルがうまく動作している間に、ブートスラップファイルに変更を加えないでください。 注目のお知らせ 私はローカルサーバー（xampp）でウェブサイトを運営しています。私もそこにいくつかのPHPを持って（何も問題はなかった）。Bootsrapのデータ属性が正しく動作しない

<!DOCTYPE html> 
<head> 

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!--conecting link to boostrap --> 
<link rel="stylesheet" type="text/css" href="css/workshop.css"> <!-- conectin link to css --> 
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 

</head> 
<body> 
<div class="pull-left"> 

        <select class="selectpicker " style="width: 100px; height: 29px;"> 
         <option selected disabled style="color: red;">Categories</option> 

         <option>Random</option> 
         <option>Random</option> 
         <option>Random</option> 
         <option>Random</option> 
         <option>Random</option> 
         <option>Random</option> 
        </select> 

        </div> 



        <div class="pull-right"> 

        <select class="selectpicker "data-style="btn-primary" style="width: 68px; height: 29px;"> 
         <option data-icon="glyphicon-heart">Public </option> 
         <option>Private</option> 
        </select> 


         <input id="botton2" type="submit" value="Post" /> 





      </div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> <!--conecting link to js --> 
<script src="js/workshop.js"></script>   

    </body> 
    </html>

出典

2017-04-21 Angelo

あなたはこの記事にを残したのですか？あなたとスペースの間にスペースを入れなければなりません – mlegg

@mleggはを固定しましたが、スペースはありません – Angelo

あなたはあなたのコードにそのCSSやJSを含めずに、ブートストラップ・セレクトプラグインを使用しようとしています。

Bootstrap Select

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

あなたはそれが含まれている場合、それは正常に動作します。

<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-select/1.12.2/js/bootstrap-select.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!DOCTYPE html> 
 
<head> 
 

 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
 
<!--conecting link to boostrap --> 
 
<link rel="stylesheet" type="text/css" href="css/workshop.css"> <!-- conectin link to css --> 
 
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 
 

 
</head> 
 
<body> 
 
<div class="pull-left"> 
 

 
        <select class="selectpicker " style="width: 100px; height: 29px;"> 
 
         <option selected disabled style="color: red;">Categories</option> 
 

 
         <option>Random</option> 
 
         <option>Random</option> 
 
         <option>Random</option> 
 
         <option>Random</option> 
 
         <option>Random</option> 
 
         <option>Random</option> 
 
        </select> 
 

 
        </div> 
 

 

 

 
        <div class="pull-right"> 
 

 
        <select class="selectpicker "data-style="btn-primary" style="width: 68px; height: 29px;"> 
 
         <option data-icon="glyphicon-heart">Public </option> 
 
         <option>Private</option> 
 
        </select> 
 

 

 
         <input id="botton2" type="submit" value="Post" /> 
 

 

 

 

 

 
      </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="js/bootstrap.min.js"></script> <!--conecting link to js --> 
 
<script src="js/workshop.js"></script>   
 

 
    </body> 
 
    </html>

出典

2017-04-21 17:16:15 Tricky12

私は正直なところ私はそれを含めたと思ってくれてありがとう、 – Angelo

あなたがいないオプション自体へのオプションの中に「スパン」または「I」要素のいずれかにクラス（いないデータ属性）として追加glyphiconsを使用します。

https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp

出典

2017-04-21 16:56:28 CaptainJ

しかしこれを見てください（オプション/アイコンのカスタマイズに行く）：https://silviomoreto.github.io/bootstrap-select/examples/ – Angelo

この文書はブートストラップのためのjQueryプラグインのためのものです。あなたのコードで参照されているスクリプトタグは表示されません。 – CaptainJ

Bootsrapのデータ属性が正しく動作しない

答えて

関連する問題