Bootstrap のドロップダウンメニューコンポーネントの詳細な分析-ブートストラップのチュートリアル-php.cn

Bootstrap のドロップダウンメニューコンポーネントの詳細な分析

ブートストラップフレームワークのドロップダウンメニューコンポーネントは独立したコンポーネントです。別のバージョンに変更すると、対応するファイル:

less 対応するソースコードファイル:dropdowns.less

sass 対応するソースコードファイル: _dropdowns. scss

ブートストラップによって作成されたドロップダウンメニューを使用する場合は、ブートストラップフレームワークによって提供される bootstrap.js ファイルを呼び出す必要があります。コンパイルされていないバージョンの場合は、js の下に Dropdown.js という名前のファイルがあり、このファイルを呼び出すこともできます。圧縮ファイル bootstrap.min.js

ブートストラップコンポーネントのインタラクティブな効果はすべて、jQuery ライブラリによって記述されたプラグインに依存しているため、ブートストラップを使用する前に確認する必要があります。 .min.js まずはjQuery.min.jsを読み込みます

公式サイトの例:

   下拉菜单项
 … 
 下拉菜单项

ログイン後にコピー

詳しい説明:

1.ドロップダウンを使用するコンテナーはドロップダウンメニュー要素

ログイン後にコピー

2 全体をラップし、

.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); }