Bootstrap源码解读按钮(5)


Posted in Javascript onDecember 23, 2016

源码解读Bootstrap按钮

按钮组

按钮组和下拉菜单组件一样,需要依赖于bootstrap.js。使用“btn-group”的容器,把多个按钮放到这个容器中。例如:<div class="btn-group">...</div>
“btn-group”容器里除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。不过这里面的标签元素需要带有类名“.btn”。

实现源码如下:

.btn-group,
.btn-group-vertical {
 position: relative;
 display: inline-block;
 vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
 position: relative;
 float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
 z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
 outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
 margin-left: -1px;
}

按钮组四个角都是圆角,除了第一个和最后一个具有边上的圆角之外,其他的按钮没有圆角。他的实现方法如下:
1. 默认所有按钮都有圆角
2. 除第一个按钮和最后一个按钮(下拉按钮除外),其他的按钮都取消圆角效果
3. 第一个按钮只留左上角和左下角是圆角
4. 最后一个按钮只留右上角和右下角是圆角
实现源码如下:

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
 border-radius: 0;
}
.btn-group > .btn:first-child {
 margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
 float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
 border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
}

按钮工具栏

要实现按钮工具栏的效果,可以将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,例如:

<div class="btn-toolbar">
 <div class="btn-group">
 …
 </div>
 <div class="btn-group">
 …
 </div>
</div>

实现原理主要是让容器的多个分组“btn-group”元素进行浮动,组与组之间保持5px的左外距,并且在”btn-toolbar”上清除浮动。源码如下:

.btn-toolbar {
 margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
 float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
 margin-left: 5px;
}
.btn-toolbar:before,
.btn-toolbar:after{
 display: table;
 content: " ";
}
.btn-toolbar:after{
 clear: both;
}

在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组:
.btn-group-lg:大按钮组
.btn-group-sm:小按钮组
.btn-group-xs:超小按钮组

实现源码如下:

.btn-lg,
.btn-group-lg> .btn{
 padding: 10px 16px;
 font-size: 18px;
 line-height: 1.33;
 border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
 padding: 5px 10px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn{
 padding: 1px 5px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}

嵌套分组

我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。例如:

<div class="btn-group">
 <button class="btn btn-default" type="button">首页</button>
 <button class="btn btn-default" type="button">产品展示</button>
 <button class="btn btn-default" type="button">案例分析</button>
 <button class="btn btn-default" type="button">联系我们</button>
 <div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="##">公司简介</a></li>
   <li><a href="##">企业文化</a></li>
   <li><a href="##">组织结构</a></li>
   <li><a href="##">客服服务</a></li>
  </ul>
 </div>
</div>

实现源码如下:

.btn-group > .btn-group {
 float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
 border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
 outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
 padding-right: 8px;
 padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
 padding-right: 12px;
 padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
 -webkit-box-shadow: none;
 box-shadow: none;
}

垂直分组

如果我们要垂直分组,我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。
实现源码如下:

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
 display: block;
 float: none;
 width: 100%;
 max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
 float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
 margin-top: -1px;
 margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
 border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
 border-top-right-radius: 4px;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
 border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}

等分按钮

等分按钮也叫自适应分组按钮,在按钮组“btn-group”上追加一个“btn-group-justified”类名即可。不过在制作等分按钮组时,尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。
等分按钮实现原理是把“btn-group-justified”模拟成表格(display:table),而且把里面的按钮模拟成表格单元格(display:table-cell)。实现源码如下:

.btn-group-justified {
 display: table;
 width: 100%;
 table-layout: fixed;
 border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
 display: table-cell;
 float: none;
 width: 1%;
}
.btn-group-justified > .btn-group .btn {
 width: 100%;
}

按钮下拉菜单

按钮下拉菜单其实在介绍嵌套分组的时候已经用过了,它和下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果,把外部容器“div.dropdown”换成了“div.btn-group”。实现源码如下:

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
 outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
 padding-right: 8px;
 padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
 padding-right: 12px;
 padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
 -webkit-box-shadow: none;
   box-shadow: none;
}

按钮的向上向下三角形

要在按钮上加一个向下的三角形,可以在<button>标签中添加一个<span class="caret"></span>来实现效果。
这个三角形的实现源码如下:

.caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px solid;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
}

在按钮中的三角形“caret”实现源码如下:

.btn .caret {
 margin-left: 0;
}
.btn-lg .caret {
 border-width: 5px 5px 0;
 border-bottom-width: 0;
}
.dropup .btn-lg .caret {
 border-width: 0 5px 5px;
}

如果需要向上的三角形,在刚才的基础上追加“dropup”类名即可。实现源码如下:

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
 content: "";
 border-top: 0;
 border-bottom: 4px solid;
}

向上弹起的下拉菜单

在“btn-group”或“dropdown”上添加类名“dropup”即可。实现源码如下:

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
 top: auto;
 bottom: 100%;
 margin-bottom: 1px;
}

主要就是将“dropdown-menu”的top值变成了auto,而把bottom值换成了100%。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
vue.js表格分页示例
Oct 18 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 #Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 #Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 #Javascript
You might like
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
JS实现星星海特效
2019/12/24 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python字符串连接方式汇总
2014/08/21 Python
python采集百度百科的方法
2015/06/05 Python
python获取文件扩展名的方法
2015/07/06 Python
简单谈谈python的反射机制
2016/06/28 Python
Python制作动态字符图的实例
2019/01/27 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python实现XML解析的方法解析
2019/11/16 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python单例设计模式实现解析
2020/01/07 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
保安拾金不昧表扬信
2014/01/15 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
2015年助残日活动总结
2015/03/27 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js