详解Bootstrap按钮组件

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

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按钮组件的更多相关文章

详解Bootstrap按钮组件（二）
按钮下拉菜单按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-g ...
详解Bootstrap缩略图组件及警示框组件
缩略图组件缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...
详解Bootstrap导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航标签形 ...
详解Bootstrap面板组件
面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了 ...
详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
详解Bootstrap下拉菜单组件
bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...
bootstrap 按钮组件
按钮组件主要的类名: .btn-toolbar 把几个 .btn-group 组合在一起,更复杂的组件 .btn-group .btn-group-vertical 垂直堆叠显示 ...
详解Bootstrap列表组组件
列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...
详解Bootstrap进度条组件
在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

随机推荐

Codeforces 723C. Polycarp at the Radio 模拟
C. Polycarp at the Radio time limit per test: 2 seconds memory limit per test: 256 megabytes input: ...
[DiocpRPC]介绍与安装
介绍: Diocp-RPC组件基于DIOCP进行扩展开发,通信协议基于HTTP,遵循RESTFul开发模式,可以用户三层开发.IDE可以支持大于等于D7的IDE,服务端组件支持Win32/Win ...
cinder backup
cinder 备份提供的驱动服务有: cinder/backup/drivers/ceph.py:def get_backup_driver(context): cinder/backup/drive ...
hibernate多表查询，结果封装在自己定义的一个实体类当中（在自己定义的类中增加构造函数）
hibernate的hql查询直接返回java对象时出现问题3 向大家请教一个问题,现在有三张表,表之间没有关联,我需要将三张表里面的所有东西查询出来存储到一个新的对象中,该如何实现,使用hibern ...
SQL Server 树查询
WITH treeAS(SELECT ParentAssetID, AssetID,1 AS x2level,nodename,CAST(nodename AS NVARCHAR(max)) x2na ...
有关pascal的填充语句小技巧
背景今天打代码,用了一次fillchar(a,sizeof(a),1); 结果a数组(of longint)所赋的值却不是1 探索 ···pascal program fillchartest; v ...
【kd-tree】bzoj1941 [Sdoi2010]Hide and Seek
枚举每个点,计算离他最近的和最远的点. #include<cstdio> #include<cmath> #include<algorithm> using nam ...
STL源码--iterator和traits编程技法
第一部分 iterator学习 STL iterators定义: 提供一种方法,使之能够依序巡访某个聚合物(容器)所含的各个元素,而又无需暴露该聚合物的内部表达方式. 任何iteartor都应该提供5 ...
iOS 用代码+Xib搭建UI界面实例
1.背景有些我们不能只用代码去构建界面,代码是万能的,你用其他方式可以实现的界面,用代码也一定能实现,但是我们没必要这样做,有的时候用xib会是更好的选择,代码和xib的优劣地方我们得知道,为了 ...
oprofile 安装使用
ubuntu上要编译安装oprofile.现在版本(0.9.9)的oprofile的编译需要binutil-dev libpopt-dev apt-get install binutil-dev li ...

详解Bootstrap按钮组件

详解Bootstrap按钮组件的更多相关文章

随机推荐

热门专题