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

Less:buttons.less

Sass:_buttons.scss

Css:Bootstrap.css    3131行~3291行

按钮组和下拉菜单组件一样,需要依赖于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-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:;
}
.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:;
}
.btn-group > .btn:first-child {
margin-left:;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius:;
border-bottom-right-radius:;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius:;
border-bottom-left-radius:;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius:;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius:;
border-bottom-right-radius:;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius:;
border-bottom-left-radius:;
}

按钮组工具栏

在富文本编辑器中,将按钮组分组排列在一起,比如说复制,剪切,粘贴一组,左对齐,中间对齐,右对齐和两端对齐一组,这时需要用到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:;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius:;
border-bottom-right-radius:;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius:;
border-bottom-left-radius:;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline:;
}
.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:;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius:;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius:;
border-bottom-left-radius:;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius:;
border-top-right-radius:;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius:;
}
.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:;
border-bottom-left-radius:;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius:;
border-top-right-radius:;
}

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

整个按钮组的宽度是容器的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按钮组件的更多相关文章

  1. 详解Bootstrap按钮组件(二)

    按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-g ...

  2. 详解Bootstrap缩略图组件及警示框组件

    缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...

  3. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  4. 详解Bootstrap面板组件

    面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了 ...

  5. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  6. 详解Bootstrap下拉菜单组件

    bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...

  7. bootstrap 按钮组件

    按钮组件主要的类名: .btn-toolbar     把几个  .btn-group 组合在一起,更复杂的组件 .btn-group .btn-group-vertical   垂直堆叠显示    ...

  8. 详解Bootstrap列表组组件

    列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...

  9. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

随机推荐

  1. 技术英文单词贴--G

    G generator 发电机,发生器,生产者

  2. Java核心知识点学习----线程中如何创建锁和使用锁 Lock,设计一个缓存系统

    理论知识很枯燥,但这些都是基本功,学完可能会忘,但等用的时候,会发觉之前的学习是非常有意义的,学习线程就是这样子的. 1.如何创建锁? Lock lock = new ReentrantLock(); ...

  3. 【笔记】CAP原理和BASE思想

    摘自http://www.jdon.com/37625 分布式领域CAP理论,Consistency(一致性), 数据一致更新,所有数据变动都是同步的Availability(可用性), 好的响应性能 ...

  4. POJ 3686 The Windy's 最小费用最大流

    每个工厂拆成N个工厂,费用分别为1~N倍原费用. //#pragma comment(linker, "/STACK:1024000000,1024000000") #includ ...

  5. c#开发Mongo笔记第二篇

    写到第二篇不得不说是我之前犯了一个小错误,其实实现子表存储也是很简单的事,先说我想实现什么样的效果吧 就是用户表里有个成绩字段,成绩字段是个子表 其实实现这个功能也很简单,用面向对象的思想很好理解,子 ...

  6. 华为手机打开Logcat的方法

    华为手机默认是关闭logcat信息的,这在开发调试时当然很不方便,打开log信息的方法如下 1. 进入拨号界面输入:*#*#2846579#*#*  2. 依次选择ProjectMenu---后台设置 ...

  7. 云计算和大数据时代网络技术揭秘(十七)VOQ机制

    VOQ机制 本章介绍的VOQ是一种新型的QoS机制,目的是为了解决著名的交换机HoL难题. 但VOQ强烈依赖于调度算法,例如,一个48口的交换机,每个端口都要维护48-1个FIFO缓存队列, 一共48 ...

  8. win7自带windows media player 已停止工作

    解决方法如下: 在计算机开始,菜单找到控制面板 ,然后打开程序和功能,选择打开或关闭window功能,媒体功能.再取消windows Media Center Windows MediaPlayer选 ...

  9. 10个经典的C语言面试基础算法及代码

    10个经典的C语言面试基础算法及代码作者:码农网 – 小峰 原文地址:http://www.codeceo.com/article/10-c-interview-algorithm.html 算法是一 ...

  10. Poj-1088-滑雪

    此题为动态规划加搜索型题目 采用记忆化搜索的方式 dp[i][j]表示从坐标为 i,j 开始滑所能达到的最长距离 则dp[i][j]=max(dp[i-1][j],dp[i][j+1],dp[i+1] ...