ブートストラップv4ドロップダウンメニューが機能しない

Question

Idkなぜ、私はブートストラップv4を使用していますが、ドロップダウンメニューは文字通りドキュメントからコピー＆ペーストされますが動作しません。私は空白のページで他の人の例を試しました。何もない。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 
<div class="col-12"> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
          Dropdown button 
 
         </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
     <a class="dropdown-item" href="#">Action</a> 
 
     <a class="dropdown-item" href="#">Another action</a> 
 
     <a class="dropdown-item" href="#">Something else here</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたが実際にダウンロードして、正しくファイルを参照し、期待通りに上記のコードは動作しますしていると仮定。ファイルは比較的ですので、ブートストラップを実行しようとしているファイルと同じレベルのscriptsフォルダにある必要があります。

必要なファイルは、jQuery、Tether、Bootstrap.jsだけです。 popper.jsは不要です。必要な3つのJavaScriptファイルに加えて、Boostrap CSSファイルも必要になるでしょう。

JavaScriptファイルは、次の順序で参照する必要があります。

1. jQueryの
2. テザー
3. ブートストラップのJavaScriptコンポーネント

あなたはブートストラップのCSSを読み込むとき、それは問題ではありません。

これは、次の例で働いて見ることができます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<div class="col-12"> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Dropdown button 
 
    </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
     <a class="dropdown-item" href="#">Action</a> 
 
     <a class="dropdown-item" href="#">Another action</a> 
 
     <a class="dropdown-item" href="#">Something else here</a> 
 
    </div> 
 
    </div> 
 
</div>

がこのテンプレートからビルドすること自由に感じています。

希望すると便利です。 :)