Bootstrap 組件之按鈕（二）
更新時間：2016年05月11日 16:23:28 作者：盛夏、光年
Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。本文給大家介紹Bootstrap 組件之按鈕的相關知識，感興趣的朋友一起學習吧
Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā),是一個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 組件(二)之按鈕的相關知識，希望對大家有所幫助！
相關文章
因為工作的需要，我要在網頁端編寫一段腳本，把數據通過網頁批量提交到系統(tǒng)中去。所以我就想到了Greasemonkey插件，于是就開始動手寫，發(fā)現問題解決得很順利2012-11-11
這篇文章主要為大家詳細介紹了微信小程序模板template使用的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
本文給大家分享的是一則翻譯過來的，由國外友人寫的如何簡單有效的實現javascript MVC樣式框架，算是一個MVC的入門教程，希望大家能夠喜歡。2015-03-03
這篇文章主要介紹了JavaScript中嚴格判斷NaN的方法，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2018-02-02
目前用TypeScript的人越來越多,尤其是一些大廠,大的項目,github上面很多開源項目也都是ts語法編譯的,這篇文章主要給大家介紹了關于TypeScript學習筆記之類型窄化的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了基于javascript處理nginx請求過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
js中字符替換函數String.replace()使用技巧，字符替換經常用的到。2011-08-08
細說webpack源碼之compile流程-rules參數處理技巧(2)
這篇文章主要介紹了webpack源碼之compile流程-rules參數處理技巧的相關知識，需要的朋友參考下吧2017-12-12
前端下載文件方法很多,url是文件地址,下面這篇文章主要給大家介紹了關于JS通過URL下載文件并重命名的兩種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了如何根據url批量下載二維碼實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05