Bootstrap 3 には組み込みサブメニュー クラスがないのはなぜですか?また、サブメニュー クラスを作成するにはどうすればよいですか?

Bootstrap サブメニューの問題: 原因と解決策

開発中の Bootstrap 3 の卓越性にもかかわらず、サブメニューが明らかに存在しないという懸念が生じています。クラス。このガイドでは、この省略の背後にある理由を明らかにし、サブメニューを実装するための実践的な解決策を示します。

Bootstrap 3 にドロップダウン サブメニューがないのはなぜですか?

の進化の過程でBootstrap、ドロップダウン サブメニュー クラスは、Bootstrap 3 RC の出現により非推奨になりました。この決定は、現代の Web デザイン、特にモバイル デバイスにおけるサブメニューの関連性が低下していることに起因しています。

サブメニュー構築のためのソリューション

ブートストラップ 5:

• JavaScriptメソッド: 表示を「ブロック」と「なし」の間で切り替えることで、親ドロップダウンが開いているときにサブメニューが閉じないようにします。
• CSS のみのメソッド (ナビゲーションバー ドロップダウンの場合): 位置CSSホバーを使用して表示するサブメニューevents.

ブートストラップ 4:

• CSS ハック: 位置決めやホバーなど、追加の CSS ルールを使用してサブメニュー機能をシミュレートします。エフェクト。

ブートストラップ 3:

• レガシーメソッド: 元の CSS とマークアップを利用して、古いブートストラップとの互換性を維持します。バージョン。

例実装 (ブートストラップ 3):

<div class="dropdown">
  <button class="dropdown-toggle" data-toggle="dropdown" type="button">
    Example Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

注: サブメニューを正しく配置するには、追加の CSS 調整が必要な場合があります。

次のガイドラインに従ってください。を使用すると、開発者は、使用されているバージョンに関係なく、Bootstrap でサブメニュー機能を簡単に実装できます。

以上がBootstrap 3 には組み込みサブメニュー クラスがないのはなぜですか?また、サブメニュー クラスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。