bootstrap4でドロップダウンメニューを設定する方法-ブートストラップのチュートリアル-php.cn

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 クラスを

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

.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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><div class="dropdown-divider"></div></pre><div class="contentsignin">ログイン後にコピー</div></div></span></span>

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

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

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

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

disabled

クラスを使用できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a></pre><div class="contentsignin">ログイン後にコピー</div></div>ドロップダウンメニューの位置

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

クラスの後に

.dropdown-menu-right クラスを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><div class="dropdown-menu dropdown-menu-right"></pre><div class="contentsignin">ログイン後にコピー</div></div>
ポップアップ表示されるドロップダウンメニューを指定します

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

要素の

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 サイトの他の関連記事を参照してください。