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

This article mainly explains "how to realize Bootstrap 3.0 buttons and drop-down menus". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and go deep into it slowly to study and learn "how to realize Bootstrap 3.0 buttons and drop-down menus" together.

1. drop-down menu

2. button group

3. push-button pull-down menu

4. summary

To familiarize yourself with the code for starting a page, first create a new test page and add the following code

The code is as follows:

Bootstrap

the

If you don't know anything, I've covered it in a previous article, you can click on the link to see www.cnblogs.com/aehyok/p/3398359.html

drop-down menu

Switchable, contextual menu for displaying linked lists.

case

Wrap both the drop-down trigger and the drop-down menu in.dropdown, and add the HTML code that makes up the menu.

The code is as follows:

Dropdown

Action

Another action

Something else here

Separated link

You can find through the above code that there may be many unfamiliar style classes or attributes.

A Dropdown button and a small icon caret on the right side, of course, this small icon and the text of the button are flat.

First look at the button button has a dropdown-toggle, there is also a data-toggle attribute, according to this attribute to pop up the list.

The dropdown-menu immediately following the ul tag should be used in conjunction with the dropdown-toggle style class for the button above, binding the button above via aria-labelledby.

The next li tag has a divider which is actually a style class for dividers.

This is probably what I understand. I definitely don't understand it properly.

alignment options

Add.text-right to the drop-down menu.dropdown-menu to right-align text.

The code is as follows:

Dropdown

Action

Another action

Something else here

Separated link

Just add a text-right style class to the ul tag in the code above.

title

A set of actions can be identified by adding a title to any drop-down menu.

The code is as follows:

drop-down menu

Dropdown

Dropdown header

Action

Another action

Something else here

Dropdown header

Separated link

The main thing is to add the Dropdown header which has a.dropdown-header style class.

disabled menu items

Add.disabled to the drop-down menu to disable links.

Change the code above to Something else here.

The code is as follows:

Something else here

This is mainly a style class that adds.disabled to the li tag.

You can see the effect after you run it, which is similar to the title above. When you click it, a disabled icon will appear. Not cut off.

button group

Tooltips and pop-ups in button groups require special settings

When applying tooltips or pop-ups to elements in a.btn-group, you must specify the container: 'body' option to avoid unwanted side effects (e.g. widening page elements and/or losing corners when tooltips or pop-ups are triggered).

base case

Put a series of.btn buttons into.btn-group.

The code is as follows:

Left

Middle

Right

With.btn-group you can take a group of button buttons and add style class btn to them

button toolbar

To assemble a group into a more complex assembly.

The code is as follows:

1

2

3

4

5

6

7

8

9

size

Just add. btn-group-* to. btn-group instead of applying size classes to every button in the group.

The code is as follows:

1

2

3

4

5

6

7

8

9

nested

To mix a drop-down menu into a series of buttons, place.btn-group into another.btn-group.

The code is as follows:

1

2

Dropdown

Dropdown link

Dropdown link

vertically aligned

Make a group of buttons appear vertically rather than horizontally.

The code is as follows:

1

2

Dropdown

Dropdown link

Dropdown link

aligned link arrangement

Stretch a group of buttons to the same size to fit the width of the parent element.

Usage of specific elements

This applies only to elements because these styles cannot be applied.

The code is as follows:

Left

Middle

Right

push-button pull-down menu

Drop down menu triggers can be made by placing any button in a.btn-group and adding the correct menu tag.

One-button drop-down menu

Just change some basic labels to turn buttons into drop-down menu switches.

The code is as follows:

Action

Action

Another action

Something else here

Separated link

Split Button Drop-Down Menu

Similarly, split button drop-down menus require the same change tag, but with one more separate button.

The code is as follows:

Action

Toggle Dropdown

Action

Another action

Something else here

Separated link

You can only click on the small icon to appear down menu amount.

size

Drop-down menu buttons apply to buttons of all size.

The code is as follows:

Large button

...

Small button

...

Extra small button

...

Button size is controlled by style classes.btn-lg,.btn-sm,.btn-xs.

Up pop-up menu

Adding.dropup to a parent element causes the drop-down menu to be triggered above the element.

The code is as follows:

Dropup

Toggle Dropdown

Thank you for reading, the above is "how to achieve Bootstrap3.0 buttons and drop-down menu" content, after learning this article, I believe we have a deeper understanding of how to achieve Bootstrap3.0 buttons and drop-down menu, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.