你的位置:首页 > 网页设计

[网页设计]详解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: 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>

按钮嵌套分组

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

image

使用的时候只需将之前制作下拉菜单的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在部分浏览器下支持并不友好