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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
js调用设备摄像头的方法
Jul 19 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时间不正确的解决方法
2008/04/09 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript中HTMLDOM操作详解
2014/12/11 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
python中的多线程实例教程
2014/08/27 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python Selenium 库的使用技巧
2020/10/16 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
迟到检讨书300字
2014/02/14 职场文书
小学英语课后反思
2014/04/26 职场文书
学期评语大全
2014/04/30 职场文书
报名委托书
2015/01/29 职场文书
幼儿园开学通知
2015/04/24 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL