Bootstrap Source drop-down menu interpret
basic usage
when using the pull-down menu Bootstrap framework, you must call bootstrap.js file Bootstrap framework. Because the effect of component interactions are dependent on Bootstrap jQuery library to write plug-ins, so before using bootstrap.min.js must first load jquery.min.js effect will be born.
Use as follows:
1. Using a vessel called "dropdown" pull-down menu of the entire package element:
2. Use a
realization principle of
the pull-down menu component Bootstrap frame, which drop down menu item is hidden by default, because the "dropdown-menu "the default style set" display: none ". Source achieved as follows:
.dropdown-MENU {
position: Absolute;
Top: 100%;
left: 0;
Z-index: 1000;
the display: none;
a float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align = left: left;
List-style: none;
background-Color: #fff;
Clip-background--webkit: Box-padding;
background-Clip: Box-padding;
border: 1px Solid #ccc;
border: 1px Solid RGBA (0, 0, 0, .15);
border-RADIUS: 4px;
-webkit Shadow--Box: 12px 6px RGBA 0 (0, 0, 0, .175);
Box-Shadow: 12px 6px RGBA 0 (0, 0, 0, .175);
}
when the parent menu item is clicked, a pull-down menu will be displayed when you tap again, the drop-down menu will continue to hide. The principle is very simple, via js, to the parent container "div.dropdown" add or remove a class name of "open" to control the pull-down menu to show or hide. That is, by default, "div.dropdown" no class name "open", when the user first clicks, "div.dropdown" will add the class name "open"; when the user clicks again, "div.dropdown "container class name" open "will be removed. Source achieved as follows:
.Open> {.dropdown-MENU
the display: Block;
}