Bootstrap 3.0 study notes buttons and drop-down menus

The previous article was a simple review of the Bootstrap CSS part, and many details were overlooked. However, I went through most of the content, implemented it with code, and saw the real effect. Pretty good. Then the next few articles will mainly explain the components of Bootstrap. Then this article mainly explains the following contents

1. Drop-down menu

2. Button Group

3. Button drop-down menu

4. Summary

Let's get familiar with the code to start building a page. First, create a new test web page and add the following code

If you don't understand something, I have introduced it in my previous article. You can click the link to view it http://www.cnblogs.com/aehyok/p/3398359.html

Drop-down menu

A toggleable, contextual menu for displaying a list of links.

Case

Wrap the dropdown trigger and the dropdown menu in .dropdown, then add the HTML code that makes up the menu.

From the above code, you can find that there may be many unfamiliar style classes or attributes.

A Dropdown button and a small icon caret on the right. Of course, the small icon and the button text are at the same level.

First, there is a dropdown-toggle in the button, and a data-toggle attribute. The list pops up based on this attribute.

The dropdown-menu immediately following the ul tag should be used in conjunction with the style class dropdown-toggle of the button above, and then bound to the button above through aria-labelledby.

Next, there is a divider in the fourth li tag, which is actually a dividing line style class.

This is probably how I understand it, but it is definitely not a complete understanding.

Alignment Options

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

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

title

In any drop-down menu you can identify a group of actions by adding a title.

The main thing is to add <li role="presentation" class="dropdown-header">Dropdown header</li> which has a .dropdown-header style class.

Disabled menu items

Add .disabled to the <li> in the drop-down menu to disable the link.

Continue to modify the above code and replace the code in the Something else here line

The main thing is to add the .disabled style class to the li tag.

You can check the effect after running it. In fact, the effect is similar to the title style above. When you click it, a disabled icon will be displayed. Can't capture the picture.

Button Group

Tooltips and popups in button groups require special setup

When applying tooltips or popovers to elements within a .btn-group, you must specify the container: 'body' option to avoid unwanted side effects (such as making the page element wider and/or losing its rounded corners when the tooltip or popover is triggered).

Basic Case

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

Through .btn-group, you can group a group of buttons and add the style class btn to them

Button Toolbar

Combine a group of <div class="btn-group"> into a <div class="btn-toolbar"> to make a more complex component.

size

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

Nesting

To blend a dropdown menu into a series of buttons, place a .btn-group inside another .btn-group.

Vertical Arrangement

Make a group of buttons appear vertically instead of horizontally.

Justified link arrangement

Makes a group of buttons stretch to the same size, fitting the width of the parent element.

This only works on <a> elements since <button> cannot have these styles applied to them.

Button drop-down menu

You can make any button a dropdown menu trigger by putting it into a .btn-group and adding the correct menu markup.

Single button drop-down menu

By changing some basic markup, you can turn a button into a drop-down menu switch.

Split button drop-down menu

Similarly, a split button dropdown menu requires the same change markup, but with an additional split button.

You can only click on the small icon to display the drop-down menu.

size

Drop-down menu buttons are available for buttons of all sizes.

Use the style classes .btn-lg, .btn-sm, and .btn-xs to control the size of the button.

Pop-up menu

Adding .dropup to a parent element will trigger the drop-down menu above the element.

Summarize

This article mainly studies buttons and drop-down menus, and then the combination of buttons and drop-down menus. There are quite a lot of variations and the styles are good, but it is still not so convenient to start using, because the introduction here is not so detailed, and it is still a bit difficult to learn. But it doesn’t matter, just practice more and you will understand it slowly.