Bootstrap 组件之按钮(二)


Posted in Javascript onMay 11, 2016

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

Javascript 相关文章推荐
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
jQuery验证插件validate使用详解
May 11 #Javascript
JQuery validate插件验证用户注册信息
May 11 #Javascript
jQuery validate验证插件使用详解
May 11 #Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 #Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 #Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
You might like
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
python转换摩斯密码示例
2014/02/16 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
jupyter 导入csv文件方式
2020/04/21 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
python元组拆包实现方法
2021/02/28 Python
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
红领巾广播站广播稿
2014/02/01 职场文书
全运会口号
2014/06/20 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
MySQL GTID复制的具体使用
2022/05/20 MySQL