Bootstrap -- component button group, bootstrap -- Component

Bootstrap -- component button group, bootstrap -- Component

What is a button group? Simple Explanation: put a bunch of buttons in one row or column. Let's look at an instance.

Button group. The first is the button, so it will be used. the btn class also contains the button group provided by bootstrap. the btn-group class is very simple. The following is a simple example provided by the bootstrap Chinese network.

<Div class = "btn-group" role = "group" aria-label = "... "> <button type =" button "class =" btn-default "> Left </button> <button type =" button "class =" btn-default "> Middle </button> <button type = "button" class = "btn-default"> Right </button> </div>

The above code implements a simple button group. The effect is as follows:

Here, let's talk about the use of input when using the button. Do not use the button directly. Although it can be used, there will still be some problems.

1. Button Toolbar
Set a group<div class="btn-group">Combine one<div class="btn-toolbar">Can be made into more complex components.

<div class="btn-toolbar" role="toolbar" aria-label="...">  <div class="btn-group" role="group" aria-label="...">...</div>  <div class="btn-group" role="group" aria-label="...">...</div>  <div class="btn-group" role="group" aria-label="...">...</div></div>



2, size
Just give.btn-groupAdd.btn-group-*Class, you do not need to assign the dimension class to each button in the button group. It is also applicable if multiple button groups are included.

<Div class = "btn-group-lg" role = "group" aria-label = "... ">... </div> <div class = "btn-group" role = "group" aria-label = "... ">... </div> <div class = "btn-group-sm" role = "group" aria-label = "... ">... </div> <div class = "btn-group-xs" role = "group" aria-label = "... ">... </div>

3. nesting
To mix the drop-down menu to a series of buttons, you only need.btn-groupPut in another.btn-group.

<div class="btn-group" role="group" aria-label="...">  <button type="button" class="btn btn-default">1</button>  <button type="button" class="btn btn-default">2</button>  <div class="btn-group" role="group">    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      Dropdown      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li><a href="#">Dropdown link</a></li>      <li><a href="#">Dropdown link</a></li>    </ul>  </div></div>


4. Vertical arrangement
Display a group of buttons vertically stacked instead of Horizontally arranged. This method is not supported in the shard button drop-down menu. UseBtn-group-vertical class

<div class="btn-group-vertical" role="group" aria-label="...">  ...</div>

5，Button groups arranged on both ends
Extend a group of buttons to the same size to fill the width of the parent element. The drop-down menu in the button group also applies. Yes.Btn-group-justified class

<div class="btn-group btn-group-justified" role="group" aria-label="...">  ...</div>

Border Processing

Because the button groups at both ends use specific HTML and CSS (that isdisplay: table-cell), The border between the two buttons is superimposed. In a normal button group,margin-left: -1pxIt is used to overlap borders without deleting any buttons. However,marginAttribute not supporteddisplay: table-cell. Therefore, based on your customization of Bootstrap, you can delete or re-set the color of the button's border.

IE8 and border

Internet Explorer 8 does not support creating borders in button groups that are aligned at both ends.<a>Or<button>Element. To take care of IE8, put each button in another.btn-group.

The button group may contain more than buttons. For how to nest other labels, please go to the www.bootcss.com official website or go to the geek college to register for study (which costs money ).

Thank you!