Bootstrap のドロップダウン メニュー コンポーネントの詳細な分析
関連する推奨事項: 「ブートストラップ チュートリアル 」
ブートストラップ フレームワークのドロップダウン メニュー コンポーネントは独立したコンポーネントです。別のバージョンに変更すると、対応するファイル:
less 対応するソース コード ファイル:dropdowns.less
sass 対応するソース コードファイル: _dropdowns. scss
ブートストラップによって作成されたドロップダウン メニューを使用する場合は、ブートストラップ フレームワークによって提供される bootstrap.js ファイルを呼び出す必要があります。コンパイルされていないバージョンの場合は、js の下に Dropdown.js という名前のファイルがあり、このファイルを呼び出すこともできます。圧縮ファイル bootstrap.min.js
ブートストラップ コンポーネントのインタラクティブな効果はすべて、jQuery ライブラリによって記述されたプラグインに依存しているため、ブートストラップを使用する前に確認する必要があります。 .min.js まずはjQuery.min.jsを読み込みます
公式サイトの例:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
詳しい説明:
1.ドロップダウンを使用する コンテナーはドロップダウン メニュー要素
<div class="dropdown"></div>
2 全体をラップし、
data-toggle=“dropdown”
3。ドロップダウン メニュー項目は ul リストを使用し、dropdown-menu
<ul class="dropdown-menu"></ul>
という名前のクラスを定義します。ブートストラップのドロップダウン メニュー項目はデフォルトで非表示になっています。ドロップダウン メニュー 表示設定: none
.dropdown-menu { position: absolute;/*设置绝对定位,相对于父元素div.dropdown*/ top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/ left: 0; z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/ display: none;/*默认隐藏下拉菜单项*/ float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
ユーザーが親メニューをクリックすると、ドロップダウン メニューが表示されます。ユーザーが再度クリックすると、ドロップダウン メニューは引き続き非表示になります
詳細説明:
js を介して親コンテナー p.dropdown に open を追加または開き、ドロップダウン メニューの表示を制御します。または非表示、つまり、デフォルトでは p.dropdown にはクラス名がありません。 open。ユーザーが初めてクリックすると、p.dropdown はクラス名 open を追加します。ユーザーが再度クリックすると、p.dropdown コンテナ内のクラス名は Removed
.open > .dropdown-menu { display: block; }
Drop になります。 -down Separator
ドロップダウン メニューに 2 つのグループがあると仮定すると、グループ間に空の
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
メニュー タイトル
このグループ化をより明確にするために、次のことができます。各グループにヘッダー タイトルも追加します。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜单头部</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> … <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li> … <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
css スタイル:
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #999; }
ブートストラップ フレームワークのドロップダウン メニューはデフォルトで左揃えになっています。ドロップダウン メニューを親コンテナに対して右揃えにしたい場合は、では、dropdown-menu.dropdown -menu-right にクラスを追加できます。v3.1.0 以降、ドロップダウン メニューに .pull-right クラスを使用することは推奨されなくなりました。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> … </ul> </div>
.dropdown-menu-right { right: 0; left: auto; } .dropdown{ float: left; }
メニュー項目のステータス
ドロップダウン メニューデフォルトの状態には、ホバー状態: ホバーおよびフォーカス状態: focus
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; }
ドロップダウン メニューには、現在の状態とこれら 2 つの状態を使用するには、対応するクラス名を対応するメニュー項目に追加するだけです
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> …. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
CSS:
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color : #fff; text-decoration : none; background-color : #428bca; outline : 0; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #999; } .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { text-decoration: none; cursor: not-allowed; background-color: transparent; background-Bootstrap のドロップダウン メニュー コンポーネントの詳細な分析: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
プログラミング関連の知識の詳細については、次を参照してください。 プログラミングビデオ! !
以上がBootstrap のドロップダウン メニュー コンポーネントの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











ブートストラップを使用して検索バーの値を取得する方法:検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド:D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法:FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
