Bootstrap按钮组件详解

 更新时间:2016年04月26日 09:17:37   投稿:mrr   我要评论

按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。通过本文给大家详细介绍Bootstrap按钮组件,感兴趣的朋友一起学习吧

按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。

结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中

按钮组也是一个独立的组件,所以可以找到相应的源码文件:

Less:buttons.less

Sass:_buttons.scss

Css:Bootstrap.css 3131行~3291行

<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-step-forward"></span>
</button>
</div>

CSS:

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

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

按钮组四个角都是圆角,除了第一个和最后一个按钮具有边上的圆角外,其他的按钮没有圆角。

详解:

1、默认:所有按钮都是圆角

2、除第一个按钮和最后一个按钮,其他的按钮圆角取消

3、最后一个按钮只留右上角和右下角为圆角

源码:

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

按钮组工具栏

在富文本编辑器中,将按钮组分组排列在一起,比如说复制,剪切,粘贴一组,左对齐,中间对齐,右对齐和两端对齐一组,这时需要用到bootstrap框架按钮工具栏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的左外距

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

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

示例:

<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-font"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-bold"></span>
</button>
</div>
</div>

按钮嵌套分组

很多时候,我们把下拉菜单很普通的按钮组排列在一起,实现类似于导航菜单的效果:

 

使用的时候只需将之前制作下拉菜单的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即可。

<div class="btn-group-vertical">
<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-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;
}

等分按钮又称为自适应分组按钮:

整个按钮组的宽度是容器的100%,而按钮组里面的每个按钮平分整个容器的宽度,例如一个按钮组里有五个按钮,每个按钮是容器宽度的20%;一个按钮组里有四个按钮,每个按钮是容器宽度的25%;

实现方法:只需要在按钮组.btn-group 上追加一个类名.btn-group-justified

<div class="btn-group btn-group-justified">
<buttton class="btn btn-default" type="button">首页</buttton>
<buttton class="btn btn-default" type="button">案例分析</buttton>
<buttton class="btn btn-default" type="button">联系我们</buttton>
<buttton class="btn btn-default" type="button">关于我们</buttton>
</div>
.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-group-justified模拟成表格(display:table),并且把里面的按钮模板模拟成表格单元格(display:table-cell)。

注意:在制作等分按钮组时,尽量使用<a>标签来制作按钮,因为使用button标签元素时,使用display:table在部分浏览器下支持并不友好

脚本之家推荐阅读:

详解Bootstrap按钮

以上所述是小编给大家介绍的Bootstrap按钮组件,希望对大家有所帮助!

相关文章

  • 关于JavaScript 的事件综合分析

    关于JavaScript 的事件综合分析

    js下比较常用的方法,事件函数代码。
    2010-08-08
  • 如何利用ES6进行Promise封装总结

    如何利用ES6进行Promise封装总结

    这篇文章主要介绍了如何利用ES6进行Promise封装总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • 手机号码,密码正则验证

    手机号码,密码正则验证

    神奇的正则表达式可以帮助我们搞定所需的格式验证,常用的有手机号码,密码等,另附上做项目经常用到的一些正则,记录一下
    2014-09-09
  • 使用FormData实现上传多个文件

    使用FormData实现上传多个文件

    这篇文章主要为大家详细介绍了使用FormData实现上传多个文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • ES6 fetch函数与后台交互实现

    ES6 fetch函数与后台交互实现

    最近在学习react-native,遇到调用后端接口的问题。看了看官方文档,推荐使用es6的fetch来与后端进行交互,这篇文章主要介绍了ES6 fetch函数与后台交互实现,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js加解密 脚本解密

    js加解密 脚本解密

    利用js异或算法实现脚本加解密的代码
    2008-02-02
  • JS实现含有中文字符串的友好截取功能分析

    JS实现含有中文字符串的友好截取功能分析

    这篇文章主要介绍了JS实现含有中文字符串的友好截取功能,结合实例形式分析了JS针对含有中文的字符串截取操作相关原理与实现技巧,需要的朋友可以参考下
    2017-03-03
  • 详解js几个绕不开的事件兼容写法

    详解js几个绕不开的事件兼容写法

    本篇文章主要介绍了详解js几个绕不开的事件兼容写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js仿淘宝商品放大预览功能

    js仿淘宝商品放大预览功能

    本文主要介绍了js仿淘宝商品放大预览功能的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • javascript检测页面是否缩放的小例子

    javascript检测页面是否缩放的小例子

    简单写了下,只测试了chrome,道理很简单,其他浏览器自行扩充。
    2013-05-05

最新评论