一、情境文本颜色

1、说明

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <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>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70

3、处理差异

有时，由于另一个选择器的特殊性，强调类不能应用。在大多数情况下，一个充分的解决办法是用类将文本包装在 < span > 中；

4、向辅助技术传递意义

使用颜色来增加意义只提供一个视觉指示，而不会传达给使用辅助技术的用户，例如屏幕阅读器。确保用颜色表示的信息从内容本身来看是显而易见的(上下文颜色只用于强化已经存在于文本/标记中的含义) ，或者通过其他方式包含，例如使用.sr-only class。

二、情景背景色

1、说明

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <p class="bg-primary">基本</p>
        <p class="bg-success">成功</p>
        <p class="bg-info">信息</p>
        <p class="bg-warning">警告</p>
        <p class="bg-danger">危险</p>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1

3、处理差异

有时，由于另一个选择器的特殊性，上下文背景类无法应用。在某些情况下，一个充分的解决办法是将元素的内容包装在 < div > 中并与class一起使用；

4、向辅助技术传递意义

与上下文的颜色一样，确保通过颜色传达的任何意义也是以一种非纯粹表象的格式传达的；

三、关闭按钮

1、说明

通过使用一个象征关闭的图标，可以让模态框和警告框消失；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2

四、三角符号

1、说明

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <span class="caret"></span>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3

五、快速浮动

1、说明

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档）使用；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <div class="pull-left">左浮动</div>
        <div class="pull-right">右浮动</div>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4

3、CSS源码

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}
// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

六、让内容块居中

1、说明

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <!-- 这里必须设置style才能实现居中 -->
        <div class="center-block" style="width:150px;background-color:#ff0000;">居中</div>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5

3、CSS源码

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
// Usage as a mixin
.element {
  .center-block();
}

七、清除浮动

1、说明

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <!-- Usage as a class -->
        <!-- 这个只能清除普通浮动，bootstrap自己的快速浮动是无法清除的 -->
        <div class="clearfix">
            清除浮动
            <div style="float: left;">右普通浮动</div>
            <div class="pull-left">左快速浮动</div>
            <div class="pull-right">右快速浮动</div>
        </div>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6

八、显示或隐藏内容

1、说明

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用；

.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only ；

另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <div class="show">显示</div>
        <div class="hidden">隐藏</div>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7

3、CSS源码

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}
// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

九、屏幕阅读器和键盘导航

1、说明

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循可访问性的最佳实践很有必要。这个类也可以作为 mixin 使用；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <p> .sr-only 类除了屏幕阅读器外，其他设备上都隐藏元素:</p>
        <a class="sr-only" href="#">跳转到主要内容</a>
        <p>与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户):</p>
        <a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8

3、CSS源码

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

十、图片替换

1、说明

使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图；

2、演示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
        <p> .text-hide 类将页面元素所包含的文本内容替换为背景图:</p>
        <div class="text-hide">在 div 元素中插入一些文本。</div>
    </body>
</html>