Bootstrap button drop-down menu example tutorial

This chapter will explain how to use the Bootstrap class to add a drop-down menu to a button. To add a drop-down menu to a button, simply place the button and drop-down menu in a .btn-group . You can also useto indicate that the button acts as a drop-down menu.

Previous words

The button-type drop-down menu is 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

Overview

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

 按钮式下拉菜单   
Action
Another action
Something else here
Separated link
 
 普通下拉菜单   
Action
Another action
Something else here
Separated link
 

Pop up

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 thetag and naming it "caret"

　　按钮下拉菜单

Copy after login

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; }

Copy after login

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; }

Copy after login

If the triangle direction To display upward, you need to append the "dropup" class name 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; }

Copy after login

按钮下拉菜单

• 按钮下拉菜单项
• 按钮下拉菜单项
• 按钮下拉菜单项
• 按钮下拉菜单项