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.

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

<div> 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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div>

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

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. <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>

Positioning of the drop-down menu

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

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