详解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">

  </button>
   …
  <button type="button" class="btn btn-default">

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

               </button>
               <button class="btn btn-default" type="button">

               </button>
               <button class="btn btn-default">

               </button>
               <button class="btn btn-default" type="button">

               </button>
           </div>
           <div class="btn-group">
               <button class="btn btn-default" type="button">

               </button>
               <button class="btn btn-default" type="button">

               </button>
           </div>
       </div>

按钮嵌套分组

多多上,我们拿下拉菜单很寻常的按钮组排列在共同,实现类似于导航菜单的意义:

Bootstrap 1

动用的早晚才待以事先做下拉菜单的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">
                   关于我们
               </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">
                    关于我们
                </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在片浏览器下支持连无和谐

相关文章