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

<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:php;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

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. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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

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

element with "dropup":<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;dropup&quot;&gt;</pre><div class="contentsignin">Copy after login</div></div>

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn