Bootstrap 組件之按鈕（二）

Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。

按鈕組

.btn-group>.btn : 一組.btn按鈕包裹在.btn-group

外包元素.btn-group {position/display/}

按鈕元素.btn

 <div role="group"><button type="button">left</button><button type="button">middle</button><button type="button">right</button></div>

按鈕工具欄

.btn-toolbar>.btn-group

外包元素.btn-toolbar {margin-left}

 <div role="toolbar"><div role="group">...</div><div role="group">...</div><div role="group">...</div></div>

按鈕尺寸

.btn-group-*(lg/md/sm/xs)

.btn-group-*>.btn {padding/font-size/border-radius}

 <div><button>left</button><button>middle</button><button>right</button></div>

按鈕嵌套

.btn-group嵌套.btn-group

 <div role="btn-group"><button>按鈕1</button><button>按鈕2</button><div role="btn-group"><button data-toggle="dropdown">下拉<span></span></button><ul><li><a>項目一</a></li><li><a>項目二</a></li></ul></div></div>

按鈕組垂直排列

.btn-group-vertical

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

按鈕組兩端對齊

表現為填滿父元素寬度

缺陷：因margin不支持display:table-cell;會出現雙邊框的效果

需要按鈕嵌套.btn-group-justified {display/width/float}

 <div role="group"><div role="group"><button>left</button></div><div role="group"><button>left</button></div><div role="group"><button data-toggle="dropdown">right <span></span></button><ul><li><a>item1</a></li><li><a>item2</a></li></ul></div></div>

按鈕式下拉菜單

外包元素類.btn-group {display/position}

依賴下拉菜單插件

單按鈕下拉菜單

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

分裂式按鈕下拉菜單

<div><button>button</button><button data-toggle="dropdown"><span></span></button><ul><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><button data-toggle="dropdown">button <span></span></button><ul><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div>

向上彈出菜單

控制彈出方向.dropup: .dropup.drop-menu {bottom/margin-bottom}

 <div><button data-toggle="dropdown">button <span></span></button><ul><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div>

以上所述是小編給大家介紹的Bootstrap 組件(二)之按鈕的相關知識，希望對大家有所幫助！