Bootstrap 组件之按钮（二）

前端技术 2023/09/04 JavaScript

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 组件(二)之按钮的相关知识，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/10089

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案