Bootstrap是Twitter推出的一個用于前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。
按鈕組
.btn-group>.btn : 一組.btn按鈕包裹在.btn-group
外包元素.btn-group {position/display/}
按鈕元素.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>
按鈕工具欄
.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">right</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"><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 組件(二)之按鈕的相關知識，希望對大家有所幫助！
新聞熱點
疑難解答
