Home > Article > Web Front-end > Bootstrap button drop-down menu example tutorial
The button-type drop-down menu looks basically the same as the drop-down menu in appearance. The difference is that ordinary drop-down menus are block elements, while button drop-down menus are inline-block elements. This article will introduce the Bootstrap button drop-down menu in detail
The button drop-down menu is actually an ordinary drop-down menu. The only difference is the external container "div.dropdown" Changed to "div.btn-group", the display changed from block to inline-block
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">按钮式下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><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><div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">普通下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><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>
Some menus need to pop up. For example, the menu is at the bottom of the page, and this menu happens to have a drop-down menu. In order to give users a better experience, the drop-down menu has to pop up. In the Bootstrap framework, a class name "dropup" is specially proposed for this effect. You only need to add this class name to "btn-group"
[Triangle]
Button The default downward triangle is created by adding a "" tag element to the
按钮下拉菜单
This triangle is completely created by CSS code to achieve
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
In addition, the triangle "caret" in the button has been styled to a certain extent:
.btn .caret { margin-left: 0; }.btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; }.dropup .btn-lg .caret { border-width: 0 5px 5px; }
If the triangle direction It needs to be displayed upward, and the "dropup" class name needs to be appended to the ".btn-group" class. It can be seen that the difference between the upward triangle and the downward triangle: In fact, it changes the value of a border-bottom
.dropup .caret, .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px solid; }
<div class="btn-group dropup" style="margin-top:140px"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li></ul></div>
The split button drop-down menu is actually an artificial combination of buttons and The triangle is split, leaving only one separate button in the end
<div class="btn-group"> <button type="button" class="btn">Action</button> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><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>
<div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li> </ul></div><div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li> </ul></div><div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">small button <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li> </ul></div>Finally Some extended usage of ordinary drop-down lists, such as dividers, dividers, alignment, menu item status, etc., are also supported by button drop-down menus. Therefore, I personally feel that it is a bit redundant to set up the button drop-down menu component in bootstrap. It is only the difference between block and inline-block, but there is no functional difference
The above is the detailed content of Bootstrap button drop-down menu example tutorial. For more information, please follow other related articles on the PHP Chinese website!