Bootstarp Learning (8) drop-down menu and bootstarp drop-down menu

Bootstarp Learning (8) drop-down menu and bootstarp drop-down menu
Drop-down menu (basic usage)

Note: In the Bootstrap frameworkDrop-down menu componentIs an independent component. According to different versions, it corresponds to the file:

LESS version: the source code file isDropdowns. less

Sass version: the source code file is_ Dropdowns. scss

The compiled Bootstrap version: 3,004th ~ 3,130th rows

When using the Bootstrap framework drop-down menu, you must call the Bootstrap. js file provided by the bootstrap framework. Of course, if you are using an uncompiled version, you can find a file named "dropdown. js" in the js folder. You can also call this js file. However, in our tutorial, We uniformly call the compressed "bootstrap. min. js" file:

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Note: Because the Interaction Effects of Bootstrap components depend on the plug-ins written in the jQuery library, bootstrap is used. min. before js, you must first load jquery. min. js will produce results.

Let's take a look at a simple example on the official website:

<Div class ="Dropdown"> <ButtonClass = "btn-defaultDropdown-toggle"Type =" button "id =" dropdownMenu1"Data-toggle = "dropdown"> Drop-down menu <span class = "caret"> </span> </Button> <UlClass ="Dropdown-menu"Role =" menu "aria-labelledby =" dropdownMenu1 "> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href = "#"> drop-down menu item </a> </li>... <Li role = "presentation" class = "divider"> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </Ul> </Div>

Usage:

When using the drop-down menu component in the Bootstrap framework, whether the structure is correctly applied is very important. If the structure and class name are not correctly used, it directly affects whether the component can be used normally. Let's take a simple look:

1. Use aDropdownThe container encapsulates the entire drop-down menu element, in the example:

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

2.<Button>Button as the parent menu, and define the class name"Dropdown-toggle"And custom"Data-toggle"Property, and the value must be consistent with the outermost container class name. In this example:

data-toggle="dropdown"

3. Use one of the drop-down menu itemsUlList, and define a class named"Dropdown-menu", This example is:

<ul class="dropdown-menu">

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href =" # "> drop-down menu item </a> </li> <li role =" presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </ul> </div>

Drop-down menu (Principle Analysis)

In the Bootstrap framework, the drop-down menu items are hidden by default, as shown below:

Because the "dropdown-menu" Default style is set to "display: none.pdf", for details about the source code, refer to the 3,010th lines of the bootstrap.css file ~ Row 3:

. Dropdown-menu {position: absolute;/* sets absolute positioning, relative to the parent element div. dropdown */top: 100%;/* place the drop-down menu item at the bottom of the parent menu item. If the parent element is not set to relative positioning, this element is relative to the body element */left: 0; z-index: 1000;/* Hide the drop-down menu item from other elements */display: none;/* Hide the drop-down menu item by default */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 you click the parent menu, the drop-down menu is displayed as follows:

When you click again, the drop-down menu will be hidden, as shown below:

Principle Analysis:

Now let's analyze the implementation principle, which is very simple. By using js technology, add or remove the class name "open" to the parent container "div. dropdown" to control the display or hide 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 adds the class name "open". When the user clicks again, "div. the class name "open" in the dropdown "container will be removed. We can view the entire process through firebug in the browser:

Default:

The user clicks for the first time:

Click again:

In the bootstrap.css file, there are 3,076th lines ~ In line 3, we can easily find that:

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

Drop-down menu (drop-down separator)

In the Bootstrap framework, the drop-down menu also provides a drop-down separator. If there are two groups in the drop-down menu, you can add an empty <li> between the group and the group, add the class name "divider" to <li> to add the drop-down separator. Corresponding style code:

/* The Source Code bootstrap.css file contains 3,034th rows ~ 3,039th rows */

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

The effect is as follows:

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href =" # "> drop-down menu item </a> </li> <li role =" presentation" class = "divider"> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </ul> </div>

Drop-down menu (menu title)

In the previous section, you can add a "divider" to group the drop-down menu. To make this group more visible, you can also add a header (title) to each group ). As follows:

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation"Class = "dropdown-header"> Part 1 menu header </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li>... <Li role = "presentation" class = "divider"> </li> <li role = "presentation"Class = "dropdown-header"> Part 2 menu header </li>... <Li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </ ul> </div>

The corresponding style is as follows:

/* Upload the bootstrap.css file to the third line ~ 3,096th rows */

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

The running effect is as follows:

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation" class = "dropdown-header"> first part menu header </li> <li role = "presentation"> <a role = "menuitem" tabindex =" -1 "href =" # "> drop-down menu item </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href =" # "> drop-down menu item </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href = "#"> drop-down menu item </a> </li> <li role = "presentation" class = "divider"> </li> <li role = "presentation" class = "dropdown-header"> Part 2 menu header </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href =" # "> drop-down menu item </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href = "#"> drop-down menu item </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down list menu item </a> </li> </ul> </div>

Drop-down menu (alignment)

To achieve right alignment:

In the Bootstrap framework, the drop-down menu is left aligned by default. If you want to make the drop-down menu relative to the parent containerRight alignmentYou can add a "pull-right" or "dropdown-menu-right" class name on "dropdown-menu", as shown below:

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menuPull-right"Role =" menu "aria-labelledby =" dropdownMenu1 ">... </Ul> </div>

In the above Code, the "pull-right" class can be replaced by "dropdown-menu-right". The two classes have the same functions and can be seen from the source code below.

Implementation principle:

The corresponding style is as follows:

/* For the source code, refer to the 3,030th lines of the bootstrap.css file ~ 3,033rd rows and 3082 rows ~ 3,085th rows */

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

At the same time, be sure to add for. dropdownfloat:leftCss style.

.dropdown{  float: left;}

The running effect is as follows:

The drop-down menu is aligned with the left side of the parent container:

At the same time, there is another class name, "dropdown-menu-left", which is the opposite of "dropdown-menu-right". The effect is to align the drop-down menu with the left side of the parent container, it is actually the default effect.

/* Please refer to the 3,086th lines of the bootstrap.css file ~ 3,089th rows */

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

<H4> use the pull-right class to align the drop-down menu with the right of the parent container 

Drop-down menu (menu item status)
The default status (not required) of the drop-down menu items is suspended (: hover) and focus (: focus ):
/* Upload the bootstrap.css file to the third line ~ 3,054th rows */
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus {  color: #262626;  text-decoration: none;  background-color: #f5f5f5;}
In addition to the preceding statuses, the drop-down menu items include the current status (. active) and disabled status (. disabled ). To use these two statuses, you only need to add the corresponding class name to the corresponding menu item:
<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <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 = "#"> drop-down menu item </a> </li> .... <Li role = "presentation"Class = "disabled"> <A role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </ul> </div>
The running effect is as follows:

The corresponding style code is also very simple:
/* Please refer to the 3,055th lines of the bootstrap.css file ~ 3,075th rows */
.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-image: none;  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}
<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <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 = "#"> drop-down menu item </a> </ li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation" class = "divider"> </li> <li role = "presentation" class = "disabled"> <a role = "menuitem" tabindex = "-1 "href =" # "> drop-down menu item </a> </li> </ul> </div>