亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap 組件之按鈕（二）

 更新時(shí)間：2016年05月11日 16:23:28   作者：盛夏、光年  
Bootstrap是Twitter推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包。本文給大家介紹Bootstrap 組件之按鈕的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧

Bootstrap是Twitter推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開(kāi)發(fā),是一個(gè)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>項(xiàng)目一</a></li>
<li><a>項(xiàng)目二</a></li>
</ul>
</div>
</div>

按鈕組垂直排列

.btn-group-vertical

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

按鈕組兩端對(duì)齊

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

缺陷：因margin不支持display:table-cell;會(huì)出現(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>

按鈕式下拉菜單

外包元素類(lèi).btn-group {display/position}

依賴(lài)下拉菜單插件

單按鈕下拉菜單

<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 組件(二)之按鈕的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

相關(guān)文章

最新評(píng)論