这里说的工具类，是指手册中没有提到的，不针对特性组件的类，这种类可以跨组件使用。
其实bs3自带的工具类相当少，所以我在本文把bs4的工具类一并介绍。bs4的官方文档（http://v4-alpha.getbootstrap.com/utilities/borders/ ）中已经包含了工具类的文档，但是bs3的官方文档中没有工具类的文档。
圆角类
bs4独有，bs3没有。
适用于图片、按钮和其他一些元素。
class="rounded"
class="rounded-top"
class="rounded-right"
class="rounded-bottom"
class="rounded-left"
class="rounded-circle"
bs3的实现：
.rounded {
border-radius: 0.25rem;
}
.rounded-top {
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.rounded-right {
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.rounded-bottom {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.rounded-left {
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.rounded-circle {
border-radius: 50%;
}
清除浮动类
bs3和bs4都有。
关闭按钮
都有。
也就是弹出层和其他一些可关闭的元素的右上角按钮。
背景颜色和文字颜色类
bs4跟bs3的区别是bs4多了.text-white {color: #fff !important;}。
用于文字：
无情感文字
主体文字
成功文字
信息文字
警告文字
危险文字
白色文字，用于背景是彩色的情况，不得用于链接文字
用于链接：
Muted link
Primary link
Success link
Info link
Warning link
Danger link
用于背景：
主体背景色，文字白色
成功背景色，文字白色
信息背景色，文字白色
警告背景色，文字白色
危险背景色，文字白色
bg-inverse是黑色背景色，文字白色
灰色背景色
Display属性相关类
bs4特有，bs3没有。
相当于“display: inline”
相当于“display: block”
相当于“display: inline-block”
隐藏文字
.text-hide用于将文字隐藏，然后设一个背景图片。为什么文字写出来又隐藏掉呢？因为这样h1的宽高依然是文字没隐藏之前的宽高，容易定位；为什么要用背景图而不是< img >图呢？因为根据“形式与内容相分离”的原则，有些图是属于形式的图，比如LOGO、背景条，这些图不应该用< img >来实现（尽管你可以实现），所以就要用背景图。还有一个原因是背景图通常会生成精灵图，< img >的图没法去生成精灵图。最后还有一个原因是文字多有助于SEO。
Custom heading
元素不可见类
其实就是visibility: hidden;
...
响应式元素类
响应式嵌入元素
嵌入元素就是视频、音频、flash等。这个实现需要三个类配合。
bs3和bs4都支持16by9和4by3，bs4加入了21by9和1by1，如果bs3也想实现21by9和1by1，需要自行写规则：
.embed-responsive-21by9 {
padding-bottom: 42.857143%;
}
.embed-responsive-1by1 {
padding-bottom: 100%;
}
响应式浮动类
bs4支持，bs3不支持。类名格式是float-xs-left这样的，中间的字符可以是xs、sm、md、lg，后面的字符可以是left或right，表示在特定媒体查询条件下，究竟是左浮动还是右浮动。
Float left on all viewport sizes
Float right on all viewport sizes
Don't float on all viewport sizes
Float left on viewports sized SM (small) or wider
Float left on viewports sized MD (medium) or wider
Float left on viewports sized LG (large) or wider
Float left on viewports sized XL (extra-large) or wider
如果希望bs3支持，可以自行写CSS：
.float-xs-left {
float: left !important;
}
.float-xs-right {
float: right !important;
}
.float-xs-none {
float: none !important;
}
@media (min-width: 576px) {
.float-sm-left {
float: left !important;
}
.float-sm-right {
float: right !important;
}
.float-sm-none {
float: none !important;
}
}
@media (min-width: 768px) {
.float-md-left {
float: left !important;
}
.float-md-right {
float: right !important;
}
.float-md-none {
float: none !important;
}
}
@media (min-width: 992px) {
.float-lg-left {
float: left !important;
}
.float-lg-right {
float: right !important;
}
.float-lg-none {
float: none !important;
}
}
@media (min-width: 1200px) {
.float-xl-left {
float: left !important;
}
.float-xl-right {
float: right !important;
}
.float-xl-none {
float: none !important;
}
}
紧贴顶部类
.pos-f-t是bs4特有的类，通常用于始终最顶部的导航，比如weibo.com就在用。想在bs3中实现，可以自行声明规则：
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1001;
}
100%类
bs4特有，.w-100即宽度百分之百，.h-100即高度百分之百。bs3可以自行声明：
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
margin和padding类
bs4有margin和padding相关的实现，但是bs3没有，bs4的规则是：
格式： {property}{sides}-{size}
m - for classes that set margin
p - for classes that set padding
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
a - for classes that set a margin or padding on all 4 sides of the element
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3
实现是：
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: $spacer-x,
y: $spacer-y
),
2: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
3: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $lengths in $spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
// Axes
.#{$abbrev}x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
上面代码比较复杂，有几个SASS的知识点。
1、$spacers变量的值是一个map类型的数据。
2、@each $prop, $abbrev in (margin: m, padding: p) {}这是一个遍历，被遍历的map是(margin: m, padding: p)，也就是说，遍历的第一次的时候，$prop的值是margin，$abbrev的值是m。
3、内部又有一个遍历@each $size, $lengths in $spacers {}，被遍历的map就是$spacers，遍历的第一次的时候，$size的值是0，$lengths的值是(x: 0, y: 0)。
4、内部又定义了两个变量：$length-x: map-get($lengths, x);和$length-y: map-get($lengths, y);，前者的map-get($lengths, x)的意思是获取$lengths的x键的值，当前就是0，也就是$length-x的值是0，同理，$length-y的值也是0。
5、下面又有这样的语句.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; }，#{$abbrev}当前是m，#{$size}当前是0，#{$prop}当前是margin，$length-y当前是0，$length-x当前是0，于是这个语句编译成的CSS就是.m-0 {margin: 0 0 !important;}
6、下面还有类似的四句，也形成四个规则。
7、下面还有两个语句，形成两个规则。
8、也就是说，大遍历第一次中的小遍历第一次，会形成7个语句，总共小遍历会有2 x 4 = 8次，最终形成7 x 8 = 56个规则。
上面代码如果用于bs3是完全可用的，不过，由于bs4全面面向rem，如果你觉得你只想开发PC页面，并不需要rem单位，也不用乘以一个倍数，那么我们现在确定一些新类命名的规则：
1、大规则：.m-0是margin: 0 !important;
2、四边规则：.mt-0、.mb-0、.ml-0、.mr-0是4个更具体的规则
3、X轴/Y轴规则：.mx-0是左右0，.my-0是上下0。
以上跟bs4的规则一样。但是下面的规则就不一样了。
4、大规则：.m-5是margin: 5px !important;，.m-10是margin: 10px !important;，.m-15是margin: 15px !important;，.m-20是margin: 20px !important;。
6、四边规则根据大规则类推。
7、X轴/Y轴规则也根据大规则类推。
8、也是margin和padding分别有一套规则。
最后SCSS如下：
@each $prop, $abbrev in (margin: m, padding: p) {
@each $multiple in (5, 10, 15, 20) {
$length: $multiple;
$length-x: $multiple * 1px;
$length-y: $multiple * 1px;
.#{$abbrev}-#{$length} { #{$prop}: $length-y $length-x !important; }
.#{$abbrev}t-#{$length} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$length} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$length} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l-#{$length} { #{$prop}-left: $length-x !important; }
.#{$abbrev}x-#{$length} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y-#{$length} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
水平居中类
bs3的类是center-block，bs4的对应类是mx-auto。
Centered element
排版
bs3和bs4都有。
文字两端对齐
asdf ghjk l;
强制不折行
asdf ghjk l;
文字居左、居中、居右
bs4有更复杂的.text-xs-left这样的配合媒体查询的类，bs3则非常简单，只有.text-left、.text-right、.text-center。
字母变形
bs3和4都有。
字母全部小写
字母全部大写
单词首字母全部大写
加粗、斜体
bs4特有。
bs4特有
bs4特有
bs4特有
文字对齐类
文字对齐类只在bs4中有，bs3并没有。CSS的vertical-align属性其实适用场合并不多，常用的就是top、middle和bottom。另外text-top和text-bottom主要用于图片跟文字的对齐。
baseline
top
middle
bottom
text-top
text-bottom
想在bs3实现的话，就是：
.align-baseline {
vertical-align: baseline !important;
}
.align-top {
vertical-align: top !important;
}
.align-middle {
vertical-align: middle !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.align-text-bottom {
vertical-align: text-bottom !important;
}
.align-text-top {
vertical-align: text-top !important;
}
额外整理的类
这里提到的类都是bs3手册中有的类，但是也可以跨组件使用，所以我也整理出来。
左浮动右浮动
...
...
显示、隐藏
...
...
fixed定位
...