How to set up drop-down menu in bootstrap4

Bootarp 4 drop-down menu

Recommended tutorial: Bootstarp Manual

The drop-down menu is toggleable and is a context menu that displays links in a list format.

<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>

Code Interpretation

##　.dropdown class is used to specify a drop-down menu.

We can use a button or link to open the drop-down menu. The button or link needs to add .dropdown-toggle and

data-toggle="dropdown" attributes. Add the .dropdown-menu

class to the

dc6dce4a544fdca2df29d5ac0ea9906b element to set the actual drop-down menu, and then add the .dropdown-item class to the options of the drop-down menu.

Separating line in the drop-down menu

<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif">##　<span style="font-size: 16px;"><strong></strong>.dropdown-divider </span>Class is used to create a horizontal dividing line in the drop-down menu: </span><pre class="brush:html;toolbar:false">&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;</pre>

Title in the drop-down menu

.dropdown-header The <span style="font-size: 14px;"></span> class is used to add a title to the drop-down menu:

<div class="dropdown-header">Dropdown header 1</div>

Available and disabled items in the drop-down menu

The .active

class will highlight the options in the drop-down menu (add a blue background ). If you want to disable the drop-down menu options, you can use the

.

disabled class. <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>

Positioning of the drop-down menu

If we want the drop-down menu to be right-aligned, we can position the

on the element. Add the .dropdown-menu-right class after the dropdown-menu class.

<div class="dropdown-menu dropdown-menu-right">

Specify the drop-down menu that pops up

If you want the drop-down menu to pop up The menu pops up, you can replace the class="dropdown" of the dc6dce4a544fdca2df29d5ac0ea9906b element with "dropup":<pre class="brush:html;toolbar:false">&lt;div class=&quot;dropup&quot;&gt;</pre>

in the button Set up a drop-down menu

We can add a drop-down menu to the button:

<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>

The above is the detailed content of How to set up drop-down menu in bootstrap4. For more information, please follow other related articles on the PHP Chinese website!