Detailed description of the Bootstrap drop-down menu component and the bootstrap drop-down menu

Detailed description of the Bootstrap drop-down menu component and the bootstrap drop-down menu

The drop-down menu component in the bootstrap framework is an independent component. Based on different versions, its corresponding files are:

The source code file for less is dropdowns. less.

The source code file corresponding to sass is: _ dropdowns. scss

When using the bootstrap mining drop-down menu, you must call the bootstrap. js file provided by the bootstrap framework. For uncompiled versions, you can find a file named dropdown. js under js or call this file. You can also call the compressed file bootstrap. min. js.

Since the Interaction Effect of the bootstrap component is dependent on the plug-in written by the jQuery library, you must first load jQuery. min. js before using bootstrap. min. js.

Examples 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>

Details:

1. Use a container named dropdown to wrap the entire drop-down menu Element

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

2. The <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 consistent with the outermost class name.

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 items in bootstrap are hidden by default, and the display: none option is set in dropdown-menu.

. Dropdown-menu {

  position

: Absolute;/* set absolute positioning, relative to 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 drop-down menu items 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. clicking the next menu will hide the menu.

Details:

Use js to send the parent-level container div. dropdown is added or an open field is used 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 in the dropdown container will be removed.

. Open>. dropdown-menu {

  display

: Block ;}

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, and add class name. dividerl to this li to add the drop-down separator.

. Dropdown-menu. divider {

  height

: 1px;

  margin

: 9px 0;

  overflow

: Hidden;

  background-color

: # E5e5e5 ;}

Menu title

To make this group more visible, you can also add a header title to each group.

<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" 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>

Css style:

. Dropdown-header {

  display

: Block;

  padding

: 3px 20px;

  font-size

: 12px;

  line-height

: 1.42857143;

  color

: #999 ;}

 

In the bootstrap framework, the drop-down menu is left aligned by default. to align the drop-down menu to the right of the parent container, you can add a class on the dropdown-menu. dropdown-menu-right. Note that the drop-down menu is no longer recommended since v3.1.0. pull-right class

<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-right" role = "menu" aria-labelledby =" dropdownMenu1 ">

   …  

</Ul> </div>. dropdown-menu-right {

  right

: 0;

  left

: Auto ;}

.dropdown

{

  float

: Left ;}

 

Menu item status

The default status of the drop-down menu is hover and 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 status and the disabled status. 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>

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-image

: None;

  filter

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