An in-depth analysis of the drop-down menu component in Bootstrap

Related recommendations: "bootstrap Tutorial"

The drop-down menu component in the bootstrap framework is an independent component. According to different version, its corresponding file:

less. The corresponding source code file is: dropdowns.less

sass. The corresponding source code file is: _dropdowns. scss

When using the drop-down menu built by bootstrap, you must call the bootstrap.js file provided by the bootstrap framework. For the uncompiled version, you can find a file named dropdown.js under js, and you can also call this file. You can also call the compressed file bootstrap.min.js

Since the interactive effects of bootstrap components all rely on plug-ins written by the jQuery library, you must be sure before using bootstrap.min.js First load jQuery.min.js

Example on the official website:

  下拉菜单   
 
下拉菜单项
 … 
 
下拉菜单项
 
 

Detailed explanation:

1. Use a dropdown The container wraps the entire drop-down menu element

2, uses thebutton as the parent menu, and defines the class name dropdown-toggle and custom data-toggle attributes, and the value must be the same as the outermost container class The names are consistent

data-toggle=“dropdown”

Copy after login

3. The drop-down menu item uses an ul list and defines a class named dropdown-menu

Copy after login

The drop-down menu item in bootstrap is hidden by default, dropdown-menu Set display: none

.dropdown-menu { position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/ top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/ left: 0; z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/ display: none;/*默认隐藏下拉菜单项*/ float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }

Copy after login

When the user clicks on the parent menu, the drop-down menu will be displayed. When the user clicks again, the drop-down menu will continue to be hidden

Detailed explanation:

Add or open an open to the parent container p.dropdown through js to control the display of the drop-down menu Or hidden, that is, by default, p.dropdown does not have the class name open. When the user clicks for the first time, p.dropdown will add the class name open. When the user clicks again, the class name in the p.dropdown container will be Removed

.open > .dropdown-menu { display: block; }

Copy after login

Drop-down separator

Assuming that the drop-down menu has two groups, then an empty

can be added between the groups, And add the class name .piderl to this li to implement the function of adding drop-down separators

.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }

Copy after login

Menu title

In order to make this Grouping is more obvious, and you can also add a header title to each group.

下拉菜单

• 第一部分菜单头部
• 下拉菜单项
…
• 第二部分菜单头部
…
• 下拉菜单项