Bootstrap 入門書 (4) メニュー・ボタン・ナビゲーション_JavaScript スキル

WBOY
リリース: 2016-05-16 15:14:57
オリジナル
1303 人が閲覧しました

次に学習するのは、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 という名前のコンテナを使用して、ドロップダウン メニュー要素全体をラップします。

は、親メニューとして
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート