bootstrap4でドロップダウンメニューを設定する方法

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

推奨チュートリアル: Bootstarp Manual

ドロップダウン メニューは切り替え可能で、リンクをリスト形式で表示するコンテキスト メニューです。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div></div>

コード解釈

## .dropdown

クラスは、ドロップダウン メニューを指定するために使用されます。 ボタンまたはリンクを使用してドロップダウン メニューを開くことができます。ボタンまたはリンクには .dropdown-toggle と

data-toggle="dropdown

"# を追加する必要があります。 ## 属性。 .dropdown-menu クラスを

dc6dce4a544fdca2df29d5ac0ea9906b 要素に追加して実際のドロップダウン メニューを設定し、次に

.dropdown-item クラスを追加します。ドロップダウン メニューのオプションに移動します。 ##ドロップダウン メニューの区切り線

<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif"><span style="font-size: 16px;">.dropdown-divider <strong>クラスは、ドロップダウン メニューに水平分割線を作成するために使用されます: </strong><pre class="brush:html;toolbar:false">&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;</pre></span></span>

ドロップダウンのタイトルmenu
.dropdown-header

クラスは、ドロップダウン メニューにタイトルを追加するために使用されます。 <span style="font-size: 14px;"></span><pre class="brush:html;toolbar:false">&lt;div class=&quot;dropdown-header&quot;&gt;Dropdown header 1&lt;/div&gt;</pre> ドロップダウン メニューで使用可能な項目と無効な項目

.active クラスが強調表示されます。ドロップダウン メニューのオプション (青色の背景を追加)。

ドロップダウン メニュー オプションを無効にしたい場合は、.

disabled

クラスを使用できます。 <pre class="brush:html;toolbar:false">&lt;a class=&quot;dropdown-item active&quot; href=&quot;#&quot;&gt;Active&lt;/a&gt; &lt;a class=&quot;dropdown-item disabled&quot; href=&quot;#&quot;&gt;Disabled&lt;/a&gt;</pre>ドロップダウン メニューの位置

ドロップダウン メニューを右揃えにしたい場合は、次のようにします。要素に を配置できます。dropdown-menu

クラスの後に

.dropdown-menu-right クラスを追加します。 <pre class="brush:html;toolbar:false">&lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;</pre>
ポップアップ表示されるドロップダウン メニューを指定します

ドロップダウン メニューをポップアップ表示したい場合 メニューがポップアップ表示されるので、dc6dce4a544fdca2df29d5ac0ea9906b 要素の

class="dropdown"

を "dropup":## に置き換えることができます。ボタン内の #

<div class="dropup">

ドロップダウン メニューの設定

ボタンにドロップダウン メニューを追加できます。 :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div></div>

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