Bootstrap源码解读按钮（5）

Bootstrap源码解读按钮（5）

源码解读Bootstrap按钮

按钮组

按钮组和下拉菜单组件一样，需要依赖于bootstrap.js。使用“btn-group”的容器，把多个按钮放到这个容器中。例如：

“btn-group”容器里除了可以使用元素之外，还可以使用其他标签元素，比如标签。不过这里面的标签元素需要带有类名“.btn”。

实现源码如下：

.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;

}

按钮组四个角都是圆角，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角。他的实现方法如下：

1. 默认所有按钮都有圆角

2. 除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果

3. 第一个按钮只留左上角和左下角是圆角

4. 最后一个按钮只留右上角和右下角是圆角

实现源码如下：

.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;

}

按钮工具栏

要实现按钮工具栏的效果，可以将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，例如：

…

…

实现原理主要是让容器的多个分组“btn-group”元素进行浮动，组与组之间保持5px的左外距，并且在”btn-toolbar”上清除浮动。源码如下：

.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:before,

.btn-toolbar:after{

display: table;

content: " ";

}

.btn-toolbar:after{

clear: both;

}

在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组：

.btn-group-lg:大按钮组

.btn-group-sm:小按钮组

.btn-group-xs:超小按钮组

实现源码如下：

.btn-lg,

.btn-group-lg> .btn{

padding: 10px 16px;

font-size: 18px;

line-height: 1.33;

border-radius: 6px;

}

.btn-sm,

.btn-group-sm> .btn {

padding: 5px 10px;

font-size: 12px;

line-height: 1.5;

border-radius: 3px;

}

.btn-xs,

.btn-group-xs> .btn{

padding: 1px 5px;

font-size: 12px;

line-height: 1.5;

border-radius: 3px;

}

嵌套分组

我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。例如：

首页

产品展示

案例分析

联系我们

关于我们

实现源码如下：

.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”即可。

实现源码如下：

.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;

}

等分按钮

等分按钮也叫自适应分组按钮，在按钮组“btn-group”上追加一个“btn-group-justified”类名即可。不过在制作等分按钮组时，尽量使用标签元素来制作按钮，因为使用标签元素时，使用display:table在部分浏览器下支持并不友好。

等分按钮实现原理是把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。实现源码如下：

.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）样式效果，把外部容器“div.dropdown”换成了“div.btn-group”。实现源码如下：

.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;

}

按钮的向上向下三角形

要在按钮上加一个向下的三角形，可以在标签中添加一个来实现效果。

这个三角形的实现源码如下：

.caret {

display: inline-block;

width: 0;

height: 0;

margin-left: 2px;

vertical-align: middle;

border-top: 4px solid;

border-right: 4px solid transparent;

border-left: 4px solid transparent;

}

在按钮中的三角形“caret”实现源码如下：

.btn .caret {

margin-left: 0;

}

.btn-lg .caret {

border-width: 5px 5px 0;

border-bottom-width: 0;

}

.dropup .btn-lg .caret {

border-width: 0 5px 5px;

}

如果需要向上的三角形，在刚才的基础上追加“dropup”类名即可。实现源码如下：

.dropup .caret,

.navbar-fixed-bottom .dropdown .caret {

content: "";

border-top: 0;

border-bottom: 4px solid;

}

向上弹起的下拉菜单

在“btn-group”或“dropdown”上添加类名“dropup”即可。实现源码如下：

.dropup .dropdown-menu,

.navbar-fixed-bottom .dropdown .dropdown-menu {

top: auto;

bottom: 100%;

margin-bottom: 1px;

}

主要就是将“dropdown-menu”的top值变成了auto，而把bottom值换成了100%。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。