详解Bootstrap按钮组件 - 洛水三千-HTML Tutorial-php.cn

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

Less：buttons.less

Sass:_buttons.scss

Css:Bootstrap.css 3131行~3291行

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

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-step-backward"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span><span style="color: #000000;">
   …
  </span><span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-step-forward"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

Copy after login

CSS:

<span style="color: #800000;">.btn-group,
.btn-group-vertical </span>{<span style="color: #ff0000;">
  position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> middle</span>;
}<span style="color: #800000;">
.btn-group > .btn,
.btn-group-vertical > .btn </span>{<span style="color: #ff0000;">
  position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;
}<span style="color: #800000;">
.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 </span>{<span style="color: #ff0000;">
  z-index</span>:<span style="color: #0000ff;"> 2</span>;
}<span style="color: #800000;">
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus </span>{<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group </span>{<span style="color: #ff0000;">
   margin-left</span>:<span style="color: #0000ff;"> -1px</span>;
}

Copy after login

除了可以使用

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

详解：

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

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

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

源码：

<span style="color: #800000;">.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) </span>{<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn:first-child </span>{<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) </span>{<span style="color: #ff0000;">
  border-top-right-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-right-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) </span>{<span style="color: #ff0000;">
  border-top-left-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-left-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn-group </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;
}<span style="color: #800000;">
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn </span>{<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle </span>{<span style="color: #ff0000;">
  border-top-right-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-right-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn-group:last-child> .btn:first-child </span>{<span style="color: #ff0000;">
  border-top-left-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-left-radius</span>:<span style="color: #0000ff;"> 0</span>;
}

Copy after login

按钮组工具栏

在富文本编辑器中，将按钮组分组排列在一起，比如说复制，剪切，粘贴一组，左对齐，中间对齐，右对齐和两端对齐一组，这时需要用到bootstrap框架按钮工具栏btn-toolbar

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-toolbar"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    …
  </span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    …
  </span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    …
  </span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    …
  </span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

Copy after login

原理：主要是让容器的多个分组.btn-group元素进行浮动，并且组与组之间保持5px的左外距

<span style="color: #800000;">.btn-toolbar </span>{<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;"> -5px</span>;
}<span style="color: #800000;">
.btn-toolbar .btn-group,
.btn-toolbar .input-group </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;
}<span style="color: #800000;">
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group </span>{<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;"> 5px</span>;
}

Copy after login

注意在btn-toolbar上清除浮动

<span style="color: #800000;">.btn-toolbar:before,
.btn-toolbar:after｛
　display: table;
content: " ";
｝
.btn-toolbar:after</span>{<span style="color: #ff0000;">
  clear</span>:<span style="color: #0000ff;"> both</span>;
}

Copy after login

示例:

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-toolbar"</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-align-left"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-align-center"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-align-right"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-align-justify"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-font"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-bold"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

按钮嵌套分组

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

使用的时候只需将之前制作下拉菜单的dropdown容器的类名换成btn-group，并且和普通的按钮放在同一级：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>首页<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>产品展示<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>案例分析<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>联系我们<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default dropdown-toggle"</span><span style="color: #ff0000;"> data-toggle</span><span style="color: #0000ff;">="dropdown"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                   关于我们</span><span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="caret"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dropdown-menu"</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>公司简介<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>企业文化<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>组织结构<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                   <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>客服服务<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
               <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

<span style="color: #800000;">.btn-group > .btn-group </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;
}<span style="color: #800000;">
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn </span>{<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle </span>{<span style="color: #ff0000;">
  border-top-right-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-right-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn-group:last-child> .btn:first-child </span>{<span style="color: #ff0000;">
  border-top-left-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-left-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle </span>{<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn + .dropdown-toggle </span>{<span style="color: #ff0000;">
  padding-right</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  padding-left</span>:<span style="color: #0000ff;"> 8px</span>;
}<span style="color: #800000;">
.btn-group > .btn-lg + .dropdown-toggle </span>{<span style="color: #ff0000;">
  padding-right</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
  padding-left</span>:<span style="color: #0000ff;"> 12px</span>;
}<span style="color: #800000;">
.btn-group.open .dropdown-toggle </span>{<span style="color: #ff0000;">
  -webkit-box-shadow</span>:<span style="color: #0000ff;"> inset 0 3px 5px rgba(0, 0, 0, .125)</span>;<span style="color: #ff0000;">
  box-shadow</span>:<span style="color: #0000ff;"> inset 0 3px 5px rgba(0, 0, 0, .125)</span>;
}<span style="color: #800000;">
.btn-group.open .dropdown-toggle.btn-link </span>{<span style="color: #ff0000;">
  -webkit-box-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  box-shadow</span>:<span style="color: #0000ff;"> none</span>;
}

Copy after login

按钮垂直分组

只需把水平分组的类名.btn-group换成.btn-group-vertical即可。

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group-vertical"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>首页<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>产品展示<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>案例分析<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>联系我们<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default dropdown-toggle"</span><span style="color: #ff0000;"> data-toggle</span><span style="color: #0000ff;">="dropdown"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                    关于我们</span><span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="caret"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dropdown-menu"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>公司简介<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>企业文化<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>组织结构<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>客服服务<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

<span style="color: #800000;">.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  max-width</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.btn-group-vertical > .btn-group > .btn </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> -1px</span>;<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group-vertical > .btn:not(:first-child):not(:last-child) </span>{<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group-vertical > .btn:first-child:not(:last-child) </span>{<span style="color: #ff0000;">
  border-top-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  border-bottom-right-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-left-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group-vertical > .btn:last-child:not(:first-child) </span>{<span style="color: #ff0000;">
  border-top-left-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-top-right-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn </span>{<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.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 </span>{<span style="color: #ff0000;">
  border-bottom-right-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom-left-radius</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child </span>{<span style="color: #ff0000;">
  border-top-left-radius</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-top-right-radius</span>:<span style="color: #0000ff;"> 0</span>;
}

Copy after login

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

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

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn-group btn-group-justified"</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">buttton </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>首页<span style="color: #0000ff;"></span><span style="color: #800000;">buttton</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">buttton </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>案例分析<span style="color: #0000ff;"></span><span style="color: #800000;">buttton</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">buttton </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>联系我们<span style="color: #0000ff;"></span><span style="color: #800000;">buttton</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">buttton </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>关于我们<span style="color: #0000ff;"></span><span style="color: #800000;">buttton</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

Copy after login

<span style="color: #800000;">.btn-group-justified </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  table-layout</span>:<span style="color: #0000ff;"> fixed</span>;<span style="color: #ff0000;">
  border-collapse</span>:<span style="color: #0000ff;"> separate</span>;
}<span style="color: #800000;">
.btn-group-justified > .btn,
.btn-group-justified > .btn-group </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> table-cell</span>;<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 1%</span>;
}<span style="color: #800000;">
.btn-group-justified > .btn-group .btn </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}

Copy after login

把.btn-group-justified模拟成表格（display：table），并且把里面的按钮模板模拟成表格单元格（display：table-cell）。

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