这里说的工具类，是指手册中没有提到的，不针对特性组件的类，这种类可以跨组件使用。
其实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都有。
<div class="bg-info clearfix">
<button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
<button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
</div>
关闭按钮
都有。
也就是弹出层和其他一些可关闭的元素的右上角按钮。
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
背景颜色和文字颜色类
bs4跟bs3的区别是bs4多了.text-white {color: #fff !important;}。
用于文字：
<p class="text-muted">无情感文字</p>
<p class="text-primary">主体文字</p>
<p class="text-success">成功文字</p>
<p class="text-info">信息文字</p>
<p class="text-warning">警告文字</p>
<p class="text-danger">危险文字</p>
<p class="text-white">白色文字，用于背景是彩色的情况，不得用于链接文字</p>
用于链接：
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
用于背景：
<div class="bg-primary text-white">主体背景色，文字白色</div>
<div class="bg-success text-white">成功背景色，文字白色</div>
<div class="bg-info text-white">信息背景色，文字白色</div>
<div class="bg-warning text-white">警告背景色，文字白色</div>
<div class="bg-danger text-white">危险背景色，文字白色</div>
<div class="bg-inverse text-white">bg-inverse是黑色背景色，文字白色</div>
<div class="bg-faded">灰色背景色</div>
Display属性相关类
bs4特有，bs3没有。
<div class="d-inline">相当于“display: inline”</div>
<div class="d-block">相当于“display: block”</div>
<div class="d-inline-block">相当于“display: inline-block”</div>
隐藏文字
.text-hide用于将文字隐藏，然后设一个背景图片。为什么文字写出来又隐藏掉呢？因为这样h1的宽高依然是文字没隐藏之前的宽高，容易定位；为什么要用背景图而不是< img >图呢？因为根据“形式与内容相分离”的原则，有些图是属于形式的图，比如LOGO、背景条，这些图不应该用< img >来实现（尽管你可以实现），所以就要用背景图。还有一个原因是背景图通常会生成精灵图，< img >的图没法去生成精灵图。最后还有一个原因是文字多有助于SEO。
<h1 class="text-hide">Custom heading</h1>
元素不可见类
其实就是visibility: hidden;
<div class="invisible">...</div>
响应式元素类
响应式嵌入元素
嵌入元素就是视频、音频、flash等。这个实现需要三个类配合。
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
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，表示在特定媒体查询条件下，究竟是左浮动还是右浮动。
<div class="float-xs-left">Float left on all viewport sizes</div><br>
<div class="float-xs-right">Float right on all viewport sizes</div><br>
<div class="float-xs-none">Don't float on all viewport sizes</div><br>
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
如果希望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。
<div class="center-block" style="width: 200px;">
Centered element
</div>
排版
bs3和bs4都有。
文字两端对齐
<p class="text-justify">asdf ghjk l;</p>
强制不折行
<p class="text-nowrap">asdf ghjk l;</p>
文字居左、居中、居右
bs4有更复杂的.text-xs-left这样的配合媒体查询的类，bs3则非常简单，只有.text-left、.text-right、.text-center。
字母变形
bs3和4都有。
<p class="text-lowercase">字母全部小写</p>
<p class="text-uppercase">字母全部大写</p>
<p class="text-capitalize">单词首字母全部大写</p>
加粗、斜体
bs4特有。
<p class="font-weight-bold">bs4特有</p>
<p class="font-weight-normal">bs4特有</p>
<p class="font-italic">bs4特有</p>
文字对齐类
文字对齐类只在bs4中有，bs3并没有。CSS的vertical-align属性其实适用场合并不多，常用的就是top、middle和bottom。另外text-top和text-bottom主要用于图片跟文字的对齐。
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
想在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手册中有的类，但是也可以跨组件使用，所以我也整理出来。
左浮动右浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
显示、隐藏
<div class="show">...</div>
<div class="hidden">...</div>
fixed定位
<div class="affix">...</div>
