Bootstrap-button group and button-like drop-down menu

Button group

Basic example

1. The button group allows multiple buttons to be stacked on the same row. This is very useful when you want to align the buttons together.
2. The tooltips and pop-up boxes in the button group need special settings:
when applying tooltips or pop-up boxes to elements in the .btn-group, you must specify the container:'body' option to avoid unnecessary side effects ( For example, when a tooltip or pop-up box is triggered, it will make the page elements wider and/or lose rounded corners).

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

Button toolbar

A set <div class="btn-group">combined into a <div class="btn-toolbar">medium can be made more complex components.

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
 </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
</div>

size

Just add the .btn-group-* class to the .btn-group, which eliminates the need to assign a size class to each button in the button group, which is also applicable if multiple button groups are included.

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group btn-group-sm">......</div>
<div class="btn-group btn-group-xs">......</div>

Nested

Want to mix a series of drop-down menu button, just to .btn-groupput another .btn-groupin

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

Vertical arrangement

Make a group of buttons stacked vertically instead of horizontally. The columnar button drop-down menu does not support this method.

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

Justified button group

1. Let a group of buttons stretch to the same size to fill the width of the parent element. The same applies to button-type drop-down menus in button groups.
2. For the <a>element, you only need to wrap a series of .btn elements into .btn-group.btn-group-justified.
3. For the <button>element to be used in a justified button group, each button must be wrapped into a button In the group

   <div class="btn-group btn-group-justified" role="group" >
            <a class="btn btn-info">a标签</a>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">按钮标签</button>
            </div>
            <a class="btn btn-info">a标签</a>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">按钮标签</button>
            </div>
        </div>

Button group drop-down menu

The last article introduced the drop-down menu , and the combination of the drop-down menu and the button is widely used in web pages.

Split button drop-down menu

Split buttons need to place two btn type elements in.btn-group

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</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>

size

The size of the size can be adjusted by the size of the button:btn-xs btn-sm btn-lg