Bootstrap -- Component-based drop-down menu, bootstrap drop-down menu
Place any button.btn-group
And 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.dropup
Class to open the trigger drop-down menu above.
This is the drop-down button group. For more information, visit www.bootcss.com.