首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap每天必学之按钮

Posted in Javascript onNovember 26, 2015

1、按钮（按钮组）

单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。

源码查询：

按钮组也是一个独立的组件，所以可以找到对应的源码文件：

☑ LESS版本：对应的源文件为buttons.less

☑ Sass版本：对应的源文件为_buttons.scss

☑ CSS版本：对应bootstrap.css文件第3131行～第3291行

使用方法：

按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。

对于结构方面，非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。如下所示：

<div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

运行效果如下所示：

Bootstrap每天必学之按钮

除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。

按钮组实现源码如下：

/查看bootstrap.css文件第3131行～第3161行/

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

从效果图上我们可以看出，按钮组四个角都是圆角（支持CSS3的浏览器），但有的小伙伴会问，我们平常制作网页时每个按钮都是带有圆角，而在按钮组中的按钮，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角，它是怎么实现的呢？其实实现方法非常简单：

  • 1、默认所有按钮都有圆角
  • 2、除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果
  • 3、第一个按钮只留左上角和左下角是圆角
  • 4、最后一个按钮只留右上角和右下角是圆角

对应的源码如下：

/查看bootstrap.css文件第3174行～第3203行/

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

2、按钮（按钮工具栏）

在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组，如下图所示：

Bootstrap每天必学之按钮

那么Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，如下所示：

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

实现原理主要是让容器的多个分组“btn-group”元素进行浮动，并且组与组之前保持5px的左外距。代码如下：

/源码请查阅bootstrap.css文件第3162行～第3173行/

.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”上清除浮动。

/源码请查阅bootstrap.css文件第5062行/

.btn-toolbar:before,
.btn-toolbar:after｛
　display: table;
content: " ";
｝
.btn-toolbar:after{
 clear: both;
}

运行效果如下：

Bootstrap每天必学之按钮

按钮组大小设置

在介绍按钮一节中，我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法：

☑ .btn-group-lg:——大按钮组

☑ .btn-group-sm:——小按钮组

☑ .btn-group-xs:——超小按钮组

只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组。如下所示：

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

实现按钮组大小效果样式代码如下：

/源码请查阅bootstrap.css文件第2320行～第2340行/

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

3、按钮（嵌套分组）

很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。如下所示：

Bootstrap每天必学之按钮

使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：

<div class="btn-group">
 <button class="btnbtn-default" type="button">首页</button>
 <button class="btnbtn-default" type="button">产品展示</button>
 <button class="btnbtn-default" type="button">案例分析</button>
 <button class="btnbtn-default" type="button">联系我们</button>
 <div class="btn-group">
 <button class="btnbtn-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>

实现的样式代码：

/查看bootstrap.css文件第3192行～第3223行/

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

4、按钮（垂直分组）

前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

运行的效果如下：

Bootstrap每天必学之按钮

实现垂直分组的样式代码：

/请查看bootstrap.css文件第3234行～第3276行/

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

和水平分组按钮不一样的是：

☑ 水平分组按钮第一个按钮左上角和左下角具有圆角以及最后一个按钮右上角和右下角具有圆角

☑ 垂直分组按钮第一个按钮左上角和右上角具有圆角以及最后一个按钮左下角和右下角具有圆角

5、按钮（等分按钮）

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：

<div class="btn-group btn-group-justified"></div>

运行效果如下：

Bootstrap每天必学之按钮

实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。具体样式代码如下：

/源码请查看bootstrap.css文件第3277行～第3291行/

.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%;
}

特别声明：在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

6、按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。

按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示：

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

实现样式代码如下：

/查看bootstrap.css文件第3204行～第3223行/

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

运行的效果如下：

Bootstrap每天必学之按钮

7、按钮的向下向上三角形

按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

这个三角形完全是通过CSS代码来实现的：

/源码请查看bootstrap.css文件第2994行～第3003行/

.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”做了一定的样式处理：

/源码查看bootstrap.css文件第3224行～第3233行/

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

有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

/源码请查看bootstrap.css文件第3109行～第3114行/

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

上面代码中可以看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。

下面是向上弹起菜单的例子：

<div class="btn-group dropup">
 <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>

运行效果如下：

Bootstrap每天必学之按钮

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是关于Bootstrap按钮组工具栏的全部内容，希望对大家的学习有所帮助。

Bootstrap每天必学之按钮

- Author -

小平果118

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
学习JavaScript设计模式(多态)
Nov 25 #Javascript
创建自己的jquery表格插件
Nov 25 #Javascript
一不小心就做错的JS闭包面试题
Nov 25 #Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 #Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 #Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 #Javascript
js获取图片宽高的方法
Nov 25 #Javascript
Three.js(1) 黑屏(2) Outlook(1) celery(1) Mysql8(2) MutationObserver(1) appdata(1) OOP(1) tree shaking(1) SeaTable(1)
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
php笔记之：文章中图片处理的使用
2013/04/26 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP中soap的用法实例
2014/10/24 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
JS实现购物车特效
2017/02/02 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python输入二维数组方法
2018/04/13 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python画图高斯分布的示例
2019/07/10 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
意大利领先的线上奢侈品销售电商：Eleonora Bonucci
2017/10/17 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
小学生班会演讲稿
2014/01/09 职场文书
小学生考试获奖感言
2014/01/30 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
小学毕业寄语大全
2014/04/03 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS