Bootstrap -- Component-based drop-down menu, bootstrap drop-down menu

Bootstrap -- Component-based drop-down menu, bootstrap drop-down menu

Place any button.btn-groupAnd then add the appropriate menu label to make the button as the menu trigger.

The simple implementation is as follows:

Code <div class = "btn-group"> <button type = "button" class = "btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false"> Action <span class = "caret"> </span> </button> <ul class = "dropdown-menu"> <li> <a href = "#"> Action </a> </li> <a href = "#"> Another action </a> </li> <li> <a href = "#"> Something else here </a> </li> <li role = "separator" class = "divider"> </li> <li> <a href = "#"> Separated link </a> </li> </ul> </div>

 

Effect

Code <div class = "btn-group"> <button type = "button" class = "btn-danger"> Action </button> <button type = "button" class = "btn-danger dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false"> <span class = "caret"> </span> <span class = "sr-only"> Toggle Dropdown </span> </button> <ul class = "dropdown-menu"> <li> <a href = "#"> Action </a> </li> <a href = "#"> Another action </a> </li>

Effect

Obviously, a vertical line is added to the left of the triangle.

Dimensions

The size style is the same as the button style, such as btn-lg and btn-small. See the previous button introduction.

 

Pop-up menu

The implementation is simple. You only need to add the parent Element.dropupClass to open the trigger drop-down menu above.

 

This is the drop-down button group. For more information, visit www.bootcss.com.