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

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

皆さん、ドロップダウン メニュー コンポーネントが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」という名前のコンテナを使用して、ドロップダウン メニュー要素全体をラップします。例では:

2. を使用します。 button は親メニューとして使用され、クラス名 "dropdown-toggle" とカスタムの "data-toggle" 属性が定義され、値は最も外側のコンテナー クラス名と一致する必要があります。この例は次のとおりです:

data-toggle="dropdown"

3. ドロップダウン メニュー項目は ul リストを使用し、「dropdown-menu」という名前のクラスを定義します。この例は次のとおりです:

<ul class="dropdown-menu">

Example

选择你喜欢的水果

• 苹果
• 香蕉
• 梨
• 桃

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

ログイン後にコピー