ブートストラップでドロップダウンメニューをトリガーする方法-ブートストラップのチュートリアル-php.cn

ブートストラップでドロップダウンメニューをトリガーする方法

爱喝马黛茶的安东尼

リリース： 2019-07-16 17:36:07

オリジナル

2511 人が閲覧しました

ドロップダウンメニュー (基本的な使用法)

皆さん、ドロップダウンメニューコンポーネントがBootstrap フレームワークは独立したコンポーネントであり、さまざまなバージョンに応じて、対応するファイル:

☑ LESS バージョン: 対応するソースコードファイルはdropdowns.less

☑ Sass バージョン: 対応するソースコードファイルは _dropdowns .sass

☑ コンパイルされたブートストラップバージョン: bootstrap.css ファイルの行 3004 から 3130 を確認してください

ブートストラップフレームワークのドロップダウンメニューを使用する場合は、ブートストラップを呼び出す必要があります。 Bootstrap フレームワークの .js ファイルによって提供されます。もちろん、コンパイルされていないバージョンを使用している場合は、js フォルダー内に「dropdown.js」という名前のファイルがあります。この js ファイルを呼び出すこともできます。ただし、このチュートリアルでは、圧縮された「bootstrap.min.js」ファイルを一律に呼びます:

コードは次のとおりです:

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

ログイン後にコピー

特別なステートメント:

Bootstrap のコンポーネントインタラクションエフェクトはすべて jQuery ライブラリで記述されたプラグインに依存しているため、エフェクトを実現するには bootstrap.min.js を使用する前に jquery.min.js をロードする必要があります。

まず、公式 Web サイトの簡単な例を見てみましょう:

<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>

ログイン後にコピー

関連する推奨事項: 「bootstrap Getting Started Tutorial」

方法使用する:

Bootstrap フレームワークでドロップダウンメニューコンポーネントを使用する場合、正しい構造を使用することが非常に重要です。構造とクラス名が正しく使用されていない場合は、直接影響します。コンポーネントが正常に使用できるかどうか。簡単に見てみましょう:

1. 「dropdown」という名前のコンテナを使用して、ドロップダウンメニュー要素全体をラップします。例では: