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:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

   …
   
<li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

Detailed explanation:

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

<div class="dropdown"></div>

2, uses the button 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”

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

<ul class="dropdown-menu"></ul>

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); }

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

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

Menu title

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

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜单头部</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

…

<li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li>

…

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

css style:

.dropdown-header {

  display: block;

  padding: 3px 20px;

  font-size: 12px;

  line-height: 1.42857143;

  color: #999;
 }

The drop-down menu in the bootstrap framework is left aligned by default. If you want the drop-down menu to be right-aligned relative to the parent container, you can add a class to dropdown-menu. dropdown -menu-right, note that starting from v3.1.0, it is no longer recommended to use the .pull-right class for drop-down menus

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

  下拉菜单
  
<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">

   …
  
</ul> </div>

.dropdown-menu-right {

  right: 0;

  left: auto;
   }

.dropdown{
float: left; 
}

Menu item status

Drop-down menu The default states include hover state: hover and focus state: focus

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

  color: #262626;

  text-decoration: none;

  background-color: #f5f5f5; }

The drop-down menu also has the current state and the disabled state. To use these two states, you only need to add the corresponding class name to the corresponding menu item

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

  下拉菜单
  
<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

    ….
    
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

CSS:

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {

  color
: #fff;

  text-decoration
: none;

  background-color
: #428bca;

  outline
: 0; }

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 
{
  color: #999; 
 }

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 
{

  text-decoration: none;

  cursor: not-allowed;

  background-color: transparent;

  background-An in-depth analysis of the drop-down menu component in Bootstrap: none;

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
}

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of An in-depth analysis of the drop-down menu component in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!