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衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

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

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

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

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

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

ホットトピック











5 つのステップで Eclipse に Bootstrap を導入します。 Bootstrap ファイルをダウンロードして解凍します。 Bootstrap フォルダーをプロジェクトにインポートします。ブートストラップの依存関係を追加します。 Bootstrap CSS と JS を HTML ファイルにロードします。ブートストラップの使用を開始して、ユーザー インターフェイスを強化します。

Stata でのブートストラップ媒介効果テストの解釈手順: 係数の符号を確認します: 媒介効果の正または負の方向を決定します。検定の p 値: 0.05 未満は、仲介効果が有意であることを示します。信頼区間を確認します。ゼロが含まれていない場合は、仲介効果が有意であることを示します。中央値の p 値を比較すると、0.05 未満であるため、仲介効果の重要性がさらに裏付けられます。

IntelliJ IDEA に Bootstrap を導入する手順: 新しいプロジェクトを作成し、「Web アプリケーション」を選択します。 「Bootstrap」Maven 依存関係を追加します。 HTML ファイルを作成し、ブートストラップ参照を追加します。 Bootstrap CSS ファイルへの実際のパスに置き換えます。 HTML ファイルを実行してブートストラップ スタイルを使用します。ヒント: CDN を使用して、ブートストラップをインポートしたり、HTML ファイル テンプレートをカスタマイズしたりできます。

Llama3 に関しては、新しいテスト結果が発表されました。大規模モデル評価コミュニティ LMSYS は、Llama3 が 5 位にランクされ、英語カテゴリでは GPT-4 と同率 1 位にランクされました。このリストは他のベンチマークとは異なり、モデル間の 1 対 1 の戦いに基づいており、ネットワーク全体の評価者が独自の提案とスコアを作成します。最終的に、Llama3 がリストの 5 位にランクされ、GPT-4 と Claude3 Super Cup Opus の 3 つの異なるバージョンが続きました。英国のシングルリストでは、Llama3 がクロードを追い抜き、GPT-4 と並びました。この結果について、Meta の主任科学者 LeCun 氏は非常に喜び、リツイートし、

ブートストラップ テストは、リサンプリング テクノロジーを使用して統計テストの信頼性を評価し、媒介効果の有意性を証明するために使用されます。まず、直接効果、間接効果、および媒介効果の信頼区間を計算します。次に、統計的テストの有意性を計算します。 Baron and Kenny または Sobel 法に従った仲介タイプ、重要性、そして最後に自然な間接効果の信頼区間を推定します。

ブートストラップ メディエーション テストは、データを複数回リサンプリングすることによってメディエーション効果を評価します: 間接効果信頼区間: メディエーション効果の推定範囲を示します。間隔にゼロが含まれない場合、効果は有意です。 p 値: 信頼区間にゼロが含まれない確率を評価し、0.05 未満の値が有意であることを示します。サンプル サイズ: 分析に使用されるデータ サンプルの数。ブートストラップ サブサンプリング時間: 繰り返されるサンプリングの数 (500 ~ 2000 回)。信頼区間にゼロが含まれず、p 値が 0.05 未満の場合、媒介効果は有意であり、媒介変数が独立変数と従属変数の間の関係を説明していることを示します。

Bootstrap と Spring Boot の主な違いは次のとおりです。 Bootstrap は Web サイト スタイル用の軽量 CSS フレームワークであるのに対し、Spring Boot は Java Web アプリケーション開発用の強力なすぐに使用できるバックエンド フレームワークです。 Bootstrap は CSS と HTML に基づいていますが、Spring Boot は Java と Spring フレームワークに基づいています。 Bootstrap は Web サイトのルック アンド フィールの作成に重点を置いているのに対し、Spring Boot はバックエンド機能に重点を置いています。 Spring Boot を Bootstrap と統合して、完全に機能的で美しいものを作成できます。

Stata でのブートストラップ メディエーション効果テストの結果をエクスポートします。 結果を保存します。 ブートストラップ ポスト 変数リストを作成します。 ローカル変数: coef se ci 結果をエクスポートします (CSV): 区切り文字付きの結果をエクスポートします。csv, varlist(`vars') カンマ nolabel を置き換えます
