ブートストラップのドロップダウン メニューの書き方

Bootstrap ドロップダウン メニューは、サブメニューを下に展開するメニュー コンポーネントです。作成方法は、親メニュー項目を作成し、「dropdown-toggle」と「data-toggle="dropdown"」を追加します。属性。ドロップダウン コンテンツを作成し、「dropdown-menu」クラスを使用してドロップダウン メニュー項目をラップします。ドロップダウン コンテンツを親メニュー項目に追加します。 「dropdown-menu-right」または「dropdown-menu-left」の整列ドロップダウン メニューを追加します。メニュー項目を区切るために「divider」クラスを追加します。ヘッダーを作成するために「dropdown-header」クラスを追加します。

#Bootstrap ドロップダウン メニュー

ドロップダウン メニューは、Bootstrap によって提供されるメニュー コンポーネントです。親メニューからサブメニューを実現する メニュー項目が下に拡張する効果は、ナビゲーション バーやユーザー インターフェイスを構築する際の一般的な要素です。

ブートストラップ ドロップダウン メニューの作成方法

1. 親メニュー項目の作成:Use< ;a> この要素はメニュー項目のコンテンツをラップし、dropdown-toggle クラスと data-toggle="dropdown" 属性をそれに追加します。

   <a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项</a>

2. ドロップダウン コンテンツの作成:

   要素を使用してドロップダウン メニュー項目をラップし、## を追加します#ドロップダウン メニューから 種類を選択します。 <pre class='brush:php;toolbar:false;'>&lt;ul class=&quot;dropdown-menu&quot;&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;子菜单项1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;子菜单项2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;子菜单项3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;</pre>
3. ドロップダウン コンテンツを親メニュー項目に追加します。
   要素を 要素の背後に、ドロップダウン メニュー構造が形成されます。 <code><pre class='brush:php;toolbar:false;'>&lt;a class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; href=&quot;#&quot;&gt;菜单项 &lt;ul class=&quot;dropdown-menu&quot;&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;子菜单项1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;子菜单项2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;子菜单项3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/a&gt;</pre>

4. 配置の追加:

   これは、dropdown-menu-right または dropdown-menu-left# を追加することで実行できます。 ## ドロップダウン メニューの配置を調整するクラス。

   <a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项
     <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">子菜单项1</a></li>
    <li><a href="#">子菜单项2</a></li>
    <li><a href="#">子菜单项3</a></li>
     </ul>
   </a>

区切り文字の追加:
6. 要素を使用して、それに divider クラスを追加できます。区切り文字を追加します。

   <ul class="dropdown-menu">
     <li><a href="#">子菜单项1</a></li>
     <li class="divider"></li>
     <li><a href="#">子菜单项3</a></li>
   </ul>

ヘッダーを追加します:
8. 要素を使用して、dropdown-header を追加できます。クラスを追加してタイトルを追加します。 rreeee

以上がブートストラップのドロップダウン メニューの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。