Bootstrap drop-down plug-in dropdown usage tips

This time I will bring you Bootstrap tips on using the dropdown plug-in, and what are the precautions when using the Bootstrap drop-down plug-in dropdown. The following is a practical case, let’s take a look.

Drop-down menu.dropdown specific usage

.dropdown triggerbutton drop-down menu ul>

.dropdown package layer

.dropdown-toggle drop-down menu trigger

data-toggle="dropdown Customattribute can be associated with js

.dropdown-menu drop-down menu

Specific example:

<p>
 <button>
  Dropdown
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

If you want the menu to be open by default, you need to add an .open class

<p>
 <button>
  Dropdown
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

.dropup Pop up menu

By setting the .dropup class for the parent element of the drop-down menu, you can make the menu pop up (the default is to pop down)

<p>
 <button>
  Dropup
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

1. Alignment: Default left aligned

Right alignment: Just add the .dropdown-menu-right class to .dropdown-menu

Note: It is aligned based on the position of the parent

How to align the drop-down menu to the right end of the drop-down menu trigger? Then you need to add a .btn block class to the drop-down menu trigger button

<p>
 <button>
  Dropup
  <span></span>
 </button>
 </p>

  
• Action
  
• Another action
  
• Something else here
  
•   
• Separated link
 

2. The title of the drop-down menu dropdown-header

You can add a title to any drop-down menu to identify a group of actions.

If you want the title of the drop-down menu to be centered, you need to add a .text-center class

 ...  
• Dropdown header
 ...

3. Dividing line: .pider 

Add a dividing line to the drop-down menu to group multiple links.

 ...  
•  ...

4. Disable menu: disabled

Add the .disabled class to the

element in the dropdown menu, thereby disabling the corresponding menu item.

 
• Regular link
 
• Disabled link
 
• Another link

Notice:

aria-haspopup="true" aria-expanded="true"

id="dropdownMenu1" aria-labelledby="dropdownMenu1" Set up for special people who need screen readers Menu linked                                        

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Bootrap Vue implements Baidu search interface function

Node.js environment variable process.env usage Detailed explanation

detailed explanation on the use of exports and module.exports of node.js and ES6

The above is the detailed content of Bootstrap drop-down plug-in dropdown usage tips. For more information, please follow other related articles on the PHP Chinese website!