Bootstrap drop-down menu, which is mandatory for every day

Bootstrap drop-down menu, which is mandatory for every day

1. drop-down menu (basic usage)

Note that the drop-down menu component in the Bootstrap framework is an independent component. Based on different versions, it corresponds to the following files:

☑LESS version: the source code file is dropdowns. less.

☑Sass version: the source code file is _ dropdowns. sass.

☑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:

Copy codeThe Code is as follows: <script src = "// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>

Note:Because the Interaction Effects of Bootstrap components are dependent on the plug-ins written by the jQuery library, you must load jquery. min. js before using bootstrap. min. js to produce results.

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

<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" 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 a container named "dropdown" to wrap the entire drop-down menu element, in the example:

2. A <button> button is used as the parent menu, and the class name "dropdown-toggle" and custom "data-toggle" attributes are defined, the value must be the same as that of the outermost container class. In this example:

Data-toggle = "dropdown"

3. The drop-down menu item uses an ul list and defines a class named "dropdown-menu". This example is:

<Ul class = "dropdown-menu">

Example

<! Doctype html> 

Ii. 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 a user clicks the parent menu item, the drop-down menu will be displayed. When the user clicks again, the drop-down menu will continue to be hidden.
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;}
3. 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 ;}
Example:

<! Doctype html> 
The effect is as follows:

Iv. 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:
Copy codeThe Code is as follows: <li role = "presentation" class = "dropdown-header"> Part 1 menu header </li>
The corresponding style is as follows:
/Bootstrap.css file 3,090th lines ~ 3,096th rows/
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #999;}
Example

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> food <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation" class = "dropdown-header"> vegetables </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> celery </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> radish </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> eggplant </ a> </li> <li role = "presentation" class = "divider"> </li> <li role = "presentation" class = "dropdown-header"> staple food </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> rice </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> steamed bread </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href =" # "> noodles </a> </li> </ul> </div>
The running effect is as follows:


5. drop-down menu (alignment Mode)
To achieve right alignment:
In the Bootstrap framework, the drop-down menu is left aligned by default. If you want to align the drop-down menu to the right of the parent container, you can add a "pull-right" or "dropdown-menu-right" class name on "dropdown-menu", as shown below:
Copy codeThe Code is as follows: <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
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, you must add the float: leftcss style to. dropdown.
.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;}
6. drop-down menu (menu item status)
The default status (not required) of the drop-down menu items is suspended (: hover) and focus (: focus ):
/Bootstrap.css file 3,049th lines ~ 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> ,. dropdown-menu>. active> a: hover ,. dropdown-menu>. active> a: focus {color: # fff; text-decoration: none; background-color: # 428bca; outline: 0 ;}. dropdown-menu>. disabled> ,. 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 );}


The above is all the content of this article, hoping to help you learn.