Shulou(Shulou.com)06/01 Report--

This article mainly introduces "Bootstrap how to achieve button drop-down menu". In daily operation, I believe many people have doubts about how to achieve button drop-down menu in Bootstrap. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to realize button drop-down menu in Bootstrap". Next, please follow the editor to study!

One, drop-down menu

A switchable, contextual menu that displays a list of links. The JavaScript plug-in for the drop-down menu makes it interactive.

1. Examples

Wrap both the pull-down menu trigger and the drop-down menu in .dropdown, or another element that declares position: relative;. Then add the HTML code that makes up the menu.

Dropdown Action Another action Something else here Separated link

Aria-haspopup: true means that a menu or floating element appears when you click; false means there is no pop-up effect.

Aria-expanded: indicates the deployment status. The default is undefined, which means that the current deployment status is unknown. Other optional values: true indicates that the element is expanded; false indicates that the element is not expanded

Aria-labelledby: when the desired label text already exists in another element, you can use aria-labelledby and set its value to the id of all read elements. As follows:

When ul gets focus, the screen reader reads: "Select your position."

Data-toggle: indicates what type of event occurs

Second, button drop-down menu

Put any button in the. btn-group, and then add the appropriate menu label, you can use the button as the menu trigger.

1. Single button drop-down menu

Action Action Another action Something else here Separated link

When the mouse is pointed, the background color is displayed.

2. Split drop-down menu

It's just one more separate button.

Action Toggle Dropdown Action Another action Something else here Separated link

You can see that it is divided into two buttons on the left and right.

Third, panel

At some point you may need to put some DOM content in a box. In this case, you can try the panel component.

1. Basic examples

All the default .panel component does is set the basic border and padding to contain the content.

Basic panel example

2. Panel with title

You can easily add a title container to the panel through the. panel-heading You can also add a predefined style title by adding the-tag of the. panel-title class. However,-the font size of the label will be overridden by the. panel-heading style.

To set the appropriate color for the link, be sure to place the link in a title tag with the. panel-title class

At this point, the study on "how to realize the button drop-down menu in Bootstrap" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.