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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 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初学者头疼问题总结
2006/07/08 PHP
第三节--定义一个类
2006/11/16 PHP
php上传文件问题汇总
2015/01/30 PHP
jquery offset函数应用实例
2012/11/14 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
python机器学习库xgboost的使用
2020/01/20 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
光荣入党自我鉴定
2014/01/22 职场文书
餐厅筹备计划书
2014/04/25 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
六一儿童节开幕词
2015/01/29 职场文书
幼儿园六一主持词
2015/06/30 职场文书
早恋主题班会
2015/08/14 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android