Bootstrap component button (2)

Bootstrap component button (2)

Bootstrap is an open-source toolkit launched by Twitter for front-end development. It was developed by Twitter designer Mark Otto and Jacob Thornton. It is a CSS/HTML framework.

Button Group

. Btn-group>. btn: A group of. btn buttons wrapped in. btn-group.

Outsourcing element. btn-group {position/display /}

Button element. btn

<div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div> 

Button Toolbar

. Btn-toolbar>. btn-group

Outsourcing element. btn-toolbar {margin-left}

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

Button size

. Btn-group-* (lg/md/sm/xs)
. Btn-group-*>. btn {padding/font-size/border-radius}

<div class="btn-group bt-group-*"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div> 

Button nesting

. Btn-group nesting. btn-group

<Div class = "btn-group" role = "btn-group"> <button class = "btn-default"> button 1 </button> <button class = "btn btn-default "> button 2 </button> <div class =" btn-group "role =" btn-group "> <button class =" btn-default dropdown-toggle "data-toggle =" dropdown "> drop-down <span class =" caret "> </span> </button> <ul class =" dropdown-menu "> <li> <a> Project 1 </a> </li> <a> Project 2 </a> </li> </ul> </div>

Vertical button group arrangement

. Btn-group-vertical

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

Alignment at both ends of the button group

It is expressed as filling the parent element width

Defect: Because margin does not support display: table-cell, there will be a double border effect.

Button nesting required. btn-group-justified {display/width/float}

<div class="btn-group btn-group-justified" role="group"><div class="btn-group" role="group"><button class="btn btn-default">left</button></div><div class="btn-group" role="group"><button class="btn btn-default">left</button></div><div class="btn-group" role="group"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">right <span class="caret"></span></button><ul class="dropdown-menu"><li><a>item1</a></li><li><a>item2</a></li></ul></div></div> 

Shortcut menu

Outsourcing element class. btn-group {display/position}

Dependency drop-down menu plug-in

Single button drop-down menu

<div class="btn-group" role="group"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div> 

Split button drop-down menu

<div class="btn-group"><button class="btn btn-default">button</button><button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div> 

Button drop-down menu size

Control size. btn-*:. btn-lg/btn-sm/btn-xs {padding/font-size/border-radius}

<div class="btn-group"><button class="btn btn-default dropdown-toggle btn-*" data-toggle="dropdown">button <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div> 

Up menu

Control the pop-up direction. dropup:. dropup. drop-menu {bottom/margin-bottom}

<div class="btn-group dropup"><button class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">button <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div>

The above section describes how to use the Bootstrap component (2) button to help you!