Bootstrap-组件之按钮(二).doc

　　Bootstrap是Twitter推出的一个用于前端开发的开源工具包。本文给大家介绍Bootstrap 组件之按钮的相关知识，感兴趣的朋友一起学习吧
　　Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
　　按钮组
　　.btn-group>.btn : 一组.btn按钮包裹在.btn-group
　　外包元素.btn-group {position/display/}
　　按钮元素.btn
　　<div class="btngroup" 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>
　　按钮工具栏
　　.btn-toolbar>.btn-group
　　外包元素.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>
　　按钮尺寸
　　.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">rightlt;/button>
　　</div>
　　按钮嵌套
　　.btn-group嵌套.btn-group
　　<div class="btn-group" role="btn-group">
　　<button class="btn btn-default">按钮1</button>
　　<button class="btn btn-default">按钮2</button>
　　<div class="btn-group" role="btn-group">
　　<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉 
　　<span class="caret"></span>
　　</button>
　　<ul class="dropdown-menu">
　　<li><a>项目一</a></li>
　　<li><a>项目二</a></li>
　　</ul>
　　</div>
　　</div>
　　按钮组垂直排列
　　.btn-group-vertical
　　<div class="btn-group-vertical" role="btn-group">
　　...
　　</div>
　　按钮组两端对齐
　　表现为填满父元素宽度
　　缺陷：因margin不支持display:table-cell;会出现双边框的效果
　　需要按钮嵌套.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>
　　按钮式下拉菜单
　　外包元素类.btn-group {display/position}
　　依赖下拉菜单插件
　　单按钮下拉菜单
　　<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>
　　分裂式按钮下拉菜单
　　<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>
　　按钮下拉菜单尺寸
　　控制大小.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"gt;
　　<li><a href="">item1</a></li>
　　<li><a href="">item2</a></li>
　　</ul>
　　</div>
　　向上弹出菜单
　　控制弹出方向.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>
　　以上所述是小编给大家介绍的Bootstrap 组件(二)之按钮的相关知识，希望对大家有所帮助！