Bootstrap ドロップダウン メニューの例の詳細な説明

前の言葉

Webページを操作するとき、コンテキストメニューや非表示/表示メニュー項目が必要になることがよくありますが、Bootstrapではデフォルトでリンクリストを表示するための切り替え可能なコンテキストメニューが提供されています。また、さまざまな対話状態でのメニュー表示は、JavaScript プラグインと併用する必要があります。この記事では、Bootstrapのドロップダウンメニューの使い方を詳しく紹介します

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

Bootstrap のコンポーネント インタラクション エフェクトはすべて jQuery ライブラリに基づいて記述されているため、プラグインなので、効果を生み出すために bootstrap.js を使用する前に jquery.js をロードする必要があります

nbsp;html><meta><title>Document</title><link><script></script><script></script>

基本的な使用法

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

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

<div></div>

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

<button></button>

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

  
  
  ActionAnother actionSomething else here

4. By set the .dropup class forドロップダウン メニューの親要素で、メニューをポップアップさせることができます (デフォルトでは下方向にポップアップします)

<div>
  <button>Dropup<span></span>
  </button>
  <ul>
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>Something else here</a></li>
  </ul>
</div>

原理分析

Bootstrap フレームワークのドロップダウン メニュー コンポーネント、ユーザーがクリックすると、「dropdown-menu」のデフォルト スタイルが「display: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 テクノロジーを使用して、親コンテナー「div」.dropdown」を追加または削除します。クラス名「open」を使用して、ドロップダウン メニューの表示または非表示を制御します。つまり、デフォルトでは、「div.dropdown」にはクラス名「open」がありません。ユーザーが初めてクリックすると、「div.dropdown」にはクラス名「open」が追加されます。もう一度、 "div.dropdown" "コンテナ内のクラス名 "open" が再び削除されます

.open > .dropdown-menu {
  display: block;
}

拡張使用法

[区切り文字]

Bootstrap フレームワークのドロップダウン メニューには、ドロップダウン メニューが用意されています。 down Separator を使用すると、ドロップダウン メニュー グループが 2 つあると仮定し、グループ間に空の

を追加し、この

にクラス名「divider」を追加します。

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}