Bootstrap——CSS样式之辅助类

情境文本颜色

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

这个在之前的文字排版中可以看到，基本的类引用

<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="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

关闭按钮、 三角符号

1、通过使用一个象征关闭的图标，可以让模态框和警告框消失。
2、通过使用三角符号可以指示某个元素具有下拉菜单的功能

<!-- close 类使元素有了关闭的功能-->
<button type="button" class="close" aria-label="Close">
	<span aria-hidden="true">&times;</span>
</button>
<!--三角向下符号-->
<span class="caret"></span>

快速浮动、清除浮动、内容块居中

1、通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。
2、通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。
3、为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。

<!--注意源文件！important的引用-->
<div class="pull-left">...</div>
<div class="pull-right">...</div>
<!-- Usage as a class -->
<div class="clearfix">...</div>
<!--让块元素居中,不是块的需要设置display:block 基本css:magin-left: auto; magin-right:auto-->
<div class="center-block">...</div>

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题。

<div class="show">...</div>
<div class="hidden">...</div>

屏幕阅读器和键盘导航、图片替换

1、.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。
2、使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<h1 class="text-hide">Custom heading</h1>

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

从 v3.2.0 版本起，形如 .visible-- 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

类组	css display
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;