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

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" 属性をそれに追加します。

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

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

   要素を使用してドロップダウン メニュー項目をラップし、## を追加します#ドロップダウン メニューから 種類を選択します。 <pre class="brush:php;toolbar:false">&lt;code class=&quot;html&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;/code&gt;</pre>
   • ドロップダウン コンテンツを親メニュー項目に追加します。
     要素を < 内にネストします。 a&gt ; 要素の背後に、ドロップダウン メニュー構造が形成されます。 <pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&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;&lt;/code&gt;</pre>
     • 配置の追加:

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

       <code class="html"><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></code>

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

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

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

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