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>

按鈕組兩端對齊

表現(xiàn)為填滿父元素寬度

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

需要按鈕嵌套.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 組件(二)之按鈕的相關知識，希望對大家有所幫助！

您可能感興趣的文章:

使用async await 封裝 axios的方法
這篇文章主要介紹了使用async await 封裝 axios的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
利用JS代碼自動刪除稿件的普通彈幕功能
這篇文章主要介紹了js代碼自動刪除稿件的普通彈幕功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
Babylon使用麥克風并處理常見問題解決
這篇文章主要為大家介紹了Babylon使用麥克風并處理常見問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
javascript驗證只能輸入數(shù)字和一個小數(shù)點示例
使用javascript限制只能輸入數(shù)字和一個小數(shù)點，在某些情況下還是比較使用的，下面有個不錯的示例，感興趣的朋友可以參考下
2013-10-10
elementui上傳圖片回顯功能實現(xiàn)
這篇文章主要介紹了elementui上傳圖片回顯,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
JS操作CSS隨機改變網頁背景實現(xiàn)思路
JS和CSS讓頁面每次刷新隨機產生一張背景圖，當然我的回答是可以的，下面是具體的實現(xiàn)思路，感興趣的朋友可以參考下
2014-03-03
JS樹形菜單組件Bootstrap TreeView使用方法詳解
這篇文章主要為大家詳細介紹了js組件Bootstrap TreeView使用方法，本文一部分針對于bootstrap的treeview的實踐，另一部分是介紹自己寫的樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jser必看的破解javascript各種加密的反向思維方法
才發(fā)現(xiàn)的破解javascript各種加密的反向思維方法,大家有好的方法都跟帖啊最近發(fā)現(xiàn)了一個代碼，加密了5層左右，我將破解到最后一步，而且不用javascript解密程序
2007-04-04
兩種WEB下的模態(tài)對話框（asp.net或js的分別實現(xiàn)）
在如今互聯(lián)網網站上，AJAX效果風靡一時，應該說AJAX技術在未來幾年不會動搖，在AJAX效果中，模態(tài)對話框是比較常見的效果，也是非常適用的。
2009-12-12
javascript eval函數(shù)深入認識
發(fā)現(xiàn)為本文起一個合適的標題還不是那么容易，呵呵，所以在此先說明下本文的兩個目的
2009-02-02