這里說的工具類，是指手冊中沒有提到的，不針對特性組件的類，這種類可以跨組件使用。

其實bs3自帶的工具類相當(dāng)少，所以我在本文把bs4的工具類一并介紹。bs4的官方文檔（http://v4-alpha.getbootstrap.com/utilities/borders/ ）中已經(jīng)包含了工具類的文檔，但是bs3的官方文檔中沒有工具類的文檔。

圓角類

bs4獨(dú)有，bs3沒有。

適用于圖片、按鈕和其他一些元素。

class="rounded"
class="rounded-top"
class="rounded-right"
class="rounded-bottom"
class="rounded-left"
class="rounded-circle"

bs3的實現(xiàn)：

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

關(guān)閉按鈕

都有。

也就是彈出層和其他一些可關(guān)閉的元素的右上角按鈕。

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

背景顏色和文字顏色類

bs4跟bs3的區(qū)別是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屬性相關(guān)類

bs4特有，bs3沒有。

<div class="d-inline">相當(dāng)于“display: inline”</div>
<div class="d-block">相當(dāng)于“display: block”</div>
<div class="d-inline-block">相當(dāng)于“display: inline-block”</div>

隱藏文字

.text-hide用于將文字隱藏，然后設(shè)一個背景圖片。為什么文字寫出來又隱藏掉呢？因為這樣h1的寬高依然是文字沒隱藏之前的寬高，容易定位；為什么要用背景圖而不是< img >圖呢？因為根據(jù)“形式與內(nèi)容相分離”的原則，有些圖是屬于形式的圖，比如LOGO、背景條，這些圖不應(yīng)該用< img >來實現(xiàn)（盡管你可以實現(xiàn)），所以就要用背景圖。還有一個原因是背景圖通常會生成精靈圖，< img >的圖沒法去生成精靈圖。最后還有一個原因是文字多有助于SEO。

<h1 class="text-hide">Custom heading</h1>

元素不可見類

其實就是visibility: hidden;

<div class="invisible">...</div>

響應(yīng)式元素類

響應(yīng)式嵌入元素

嵌入元素就是視頻、音頻、flash等。這個實現(xiàn)需要三個類配合。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

bs3和bs4都支持16by9和4by3，bs4加入了21by9和1by1，如果bs3也想實現(xiàn)21by9和1by1，需要自行寫規(guī)則：

.embed-responsive-21by9 {
  padding-bottom: 42.857143%;
}

.embed-responsive-1by1 {
  padding-bottom: 100%;
}

響應(yīng)式浮動類

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特有的類，通常用于始終最頂部的導(dǎo)航，比如weibo.com就在用。想在bs3中實現(xiàn)，可以自行聲明規(guī)則：

.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相關(guān)的實現(xiàn)，但是bs3沒有，bs4的規(guī)則是：

格式： {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

實現(xiàn)是：

$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;
    }
  }
}

上面代碼比較復(fù)雜，有幾個SASS的知識點。

1、$spacers變量的值是一個map類型的數(shù)據(jù)。

2、@each $prop, $abbrev in (margin: m, padding: p) {}這是一個遍歷，被遍歷的map是(margin: m, padding: p)，也就是說，遍歷的第一次的時候，$prop的值是margin，$abbrev的值是m。

3、內(nèi)部又有一個遍歷@each $size, $lengths in $spacers {}，被遍歷的map就是$spacers，遍歷的第一次的時候，$size的值是0，$lengths的值是(x: 0, y: 0)。

4、內(nèi)部又定義了兩個變量：$length-x: map-get($lengths, x);和$length-y: map-get($lengths, y);，前者的map-get($lengths, x)的意思是獲取$lengths的x鍵的值，當(dāng)前就是0，也就是$length-x的值是0，同理，$length-y的值也是0。

5、下面又有這樣的語句.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; }，#{$abbrev}當(dāng)前是m，#{$size}當(dāng)前是0，#{$prop}當(dāng)前是margin，$length-y當(dāng)前是0，$length-x當(dāng)前是0，于是這個語句編譯成的CSS就是.m-0 {margin: 0 0 !important;}

6、下面還有類似的四句，也形成四個規(guī)則。

7、下面還有兩個語句，形成兩個規(guī)則。

8、也就是說，大遍歷第一次中的小遍歷第一次，會形成7個語句，總共小遍歷會有2 x 4 = 8次，最終形成7 x 8 = 56個規(guī)則。

上面代碼如果用于bs3是完全可用的，不過，由于bs4全面面向rem，如果你覺得你只想開發(fā)PC頁面，并不需要rem單位，也不用乘以一個倍數(shù)，那么我們現(xiàn)在確定一些新類命名的規(guī)則：

1、大規(guī)則：.m-0是margin: 0 !important;
2、四邊規(guī)則：.mt-0、.mb-0、.ml-0、.mr-0是4個更具體的規(guī)則
3、X軸/Y軸規(guī)則：.mx-0是左右0，.my-0是上下0。
以上跟bs4的規(guī)則一樣。但是下面的規(guī)則就不一樣了。
4、大規(guī)則：.m-5是margin: 5px !important;，.m-10是margin: 10px !important;，.m-15是margin: 15px !important;，.m-20是margin: 20px !important;。
6、四邊規(guī)則根據(jù)大規(guī)則類推。
7、X軸/Y軸規(guī)則也根據(jù)大規(guī)則類推。
8、也是margin和padding分別有一套規(guī)則。

最后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的對應(yīng)類是mx-auto。

<div class="center-block" style="width: 200px;">
  Centered element
</div>

排版

bs3和bs4都有。

文字兩端對齊

<p class="text-justify">asdf ghjk l;</p>

強(qiáng)制不折行

<p class="text-nowrap">asdf ghjk l;</p>

文字居左、居中、居右

bs4有更復(fù)雜的.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實現(xiàn)的話，就是：

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