[Bootstrap]组件（二）

按钮组

.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>

转载于:https://www.cnblogs.com/bsj2016/p/5478769.html

[Bootstrap]组件（二）相关推荐

JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
阅读目录七.多值输入组件manifest 1.效果展示 2.源码说明 3.代码示例八.文本框搜索组件bootstrap-typeahead 1.效果展示 2.源码说明 3.代码示例九.boots ...
Bootstrap组件福利篇：十二款好用的组件推荐
阅读目录一.时间组件 1.效果展示 2.源码说明 3.代码示例二.自增器组件 1.效果展示 2.源码说明 3.代码示例三.加载效果一.实用型二.炫酷型四.流程图小插件 1.效果展示 2.源 ...
Bootstrap基础二十七多媒体对象（Media Object）
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
BootStrap 组件和样式
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架二.BootStrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优 ...
Bootstrap基础二网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
手机自动化测试：appium源码分析之bootstrap十二
手机自动化测试:appium源码分析之bootstrap十二 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请 ...
Big-man的Bootstrap篇(二)
Big-man的Bootstrap篇(二) 前言: Big-man突然想要去深入地了解一下Bootstrap这个应用框架,毕竟很强大的技术需要更加仔细地推敲,才能发现其中蕴含的更强大的能量. Boot ...
Bootstrap 组件
2.Bootstrap 组件 Bootstrap组件是Bootstrap框架的核心之一.可以利用Bootstrap组件构建出绚丽的页面常用的组件:Icon图标(Glyphicon).下拉菜单(Dro ...
bootstrap组件
一.Bootstrap常用的组件: icon图标,下拉菜单,导航,导航条,输入框,缩略图,媒体对象,列表组,分页导航. 二.小图标: 1.bootstrap中内置提供了250多种小图标. 2.语法:首 ...

[Bootstrap]组件（二）

[Bootstrap]组件（二）相关推荐

最新文章

热门文章