Bootstrap Component button (ii) _javascript tips

Bootstrap is a Twitter-launched Open source Toolkit for front-end development. It was developed in collaboration with the Twitter designer Mark Otto and Jacob Thornton, a css/html framework.

Button Group

. BTN-GROUP>.BTN: A group of. BTN buttons wrapped in. Btn-group

Outsourced elements. Btn-group {position/display/}

The 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>

Button Toolbar

. btn-toolbar>.btn-group

Outsourced elements. 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>

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>

Button nesting

. Btn-group nesting. Btn-group

<div class= "Btn-group" role= "Btn-group" >
<button class= "btn btn-default" > button 1</button>
<button class= "btn btn-default" > button 2</button> <div class= "Btn-group"
role= "Btn-group" >
<button class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" > Dropdown <span class= 
"caret" ></ span>
</button>
<ul class= "Dropdown-menu" >
<li><a> Project One </a></li >
<li><a> Project two </a></li>
</ul>
</div>

Button groups are arranged vertically

. btn-group-vertical

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

Button group Justify

is expressed as filling the width of the parent element

Defect: Margin does not support Display:table-cell; the effect of a bilateral box will appear

Button nesting is 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"
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>

Button Pull-down Menu

Outsourced element class. Btn-group {display/position}

Dependency Pull-down Menu Plugin

Single Button Pull-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>

Split-button Pull-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>

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>

pop-up menu up

Control the eject 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 is a small set to introduce the bootstrap components (ii) of the relevant knowledge of the button, I hope to help you!