Detailed explanation of Bootstrap drop-down menu examples

Previous words

When interacting with web pages, context menus or hidden/show menu items are often needed. Bootstrap provides a switchable, contextual menu by default for displaying a link list. Moreover, the menu display in various interactive states needs to be used in conjunction with the javascript plug-in. This article will introduce the Bootstrap drop-down menu in detail

How to use

When using the drop-down menu of the Bootstrap framework, you must call the bootstrap.js file provided by the Bootstrap framework. Of course, if you are using the uncompiled version, you can find a file named "dropdown.js" in the js folder, and you can also call this js file

Because Bootstrap's component interaction effects all depend on A plug-in written by the jQuery library, so jquery.js must be loaded before using bootstrap.js to produce the effect

nbsp;html><meta><title>Document</title><link><script></script><script></script>

Basic usage

When using the drop-down menu component in the Bootstrap framework, it is very important to use the correct structure. If the structure and class name are not used correctly, it will directly affect whether the component can be used normally

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

<div></div>

2. Use a button as the parent menu, and define the class name "dropdown-toggle" and Customize the "data-toggle" attribute, and the value must be consistent with the outermost container class name

<button></button>

3. The drop-down menu item uses a ul list, and defines a class name "dropdown -menu"

  
  
  ActionAnother actionSomething else here

## 4. By setting

.dropup for the parent element of the drop-down menu class, which allows the menu to pop up (the default is to pop down)

<div>
  <button>Dropup<span></span>
  </button>
  <ul>
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>Something else here</a></li>
  </ul>
</div>

Principle Analysis

The drop-down menu component in the Bootstrap framework, its drop-down menu items are hidden by default because the "dropdown-menu" default style is set to "display:none"; when the user clicks on the parent menu item, the drop-down menu will be displayed; When the user clicks again, the drop-down menu will continue to hide

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

Now let’s analyze the implementation principle. It is very simple. Through js technical means, add or Remove the class name "open" to control the display or hiding of the drop-down menu. That is to say, by default, "div.dropdown" does not have the class name "open". When the user clicks for the first time, "div.dropdown" will add the class name "open"; when the user clicks again, "div.dropdown" "The class name "open" in the container will be removed again

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

Extended usage

[Separator line]

The drop-down menu in the Bootstrap framework provides a drop-down separator. Assuming that the drop-down menu has two groups, you can add an empty

between the groups and add a class name to this

divider" to implement the function of adding drop-down dividers

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

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>Something else here</a></li>
<li>
<li><a>Separated link</a></li>
  </ul>
</div>

[Menu title]

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

Dropdown header

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li>第一部分菜单头部</li>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li>
<li>第二部分菜单头部</li>
<li><a>下拉菜单项</a></li>
  </ul>
</div>

[Alignment]

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 dropdown-menu on "dropdown-menu" "dropdown-menu-right" class name

.dropdown-menu-right {
  right: 0;
  left: auto;
}

Since

is a block-level element by default, filling the parent width. Here, you need to set inline-block and margin-left for the element so that its content stretches the width and is a certain distance from the left side

    display: inline-block;
    margin-left: 60px;

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li>
<li><a>下拉菜单项</a></li>
  </ul>
</div>

【Menu item status】

The default states of drop-down menu items are 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;
}

In addition to the above two states, the drop-down menu items also have the current state (.active) and the disabled state (.disabled). To use these two states, you only need to add the corresponding class name to the corresponding menu item

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li>
<li><a>下拉菜单项</a></li>
  </ul>
</div>

The above is the detailed content of Detailed explanation of Bootstrap drop-down menu examples. For more information, please follow other related articles on the PHP Chinese website!