次に学習するのは、Bootstrap が提供するいくつかのコンポーネントです。これらのコンポーネントは非常に使いやすく、Web サイトを迅速かつ便利に構築するのに役立ち、優れた表示効果を実現できます。最も注意を払う必要があるのは、HTML の構造と、その構造に追加するためにブートストラップが提供するクラスと属性です。
これらのコンポーネントのインタラクティブ機能は jQuery ライブラリに依存しているため、jQuery.js も導入する必要があり、Bootstrap.js の前に導入する必要があります。正式にリリースされた場合は、次のように圧縮バージョンを使用してください:
<script src="../js/jquery-min-1.11.3.js"></script><script src="../js/bootstrap.min.js"></script>
メニュー
基本的な使い方
公式ドキュメントでは、ドロップダウン メニュー コンポーネントは次のようになります:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> </ul></div>
それでは、行動を制御するにはどの属性が必要なのでしょうか?改造にはどの部品を使用しますか?
このコードを自分で単純化してみましょう:
<div class="dropdown"> <button class="dropdown-toggle"data-toggle="dropdown">下拉菜单</button> <ul class="dropdown-menu" > <li>菜单项1</li> <li>菜单项2</li> </ul></div>
簡略化の前後の比較を見てみましょう:
Bootstrap フレームワークでドロップダウン メニュー コンポーネントを使用する場合、正しい構造を使用することが非常に重要です。構造とクラス名が正しく使用されないと、コンポーネントが正常に使用できるかどうかに直接影響します。上記の単純化を経て、最終的に中心となる要件は次のとおりであることがわかります。
.dropdown という名前のコンテナを使用して、ドロップダウン メニュー要素全体をラップします。
は、親メニューとして