Bootstrap CSS 辅助类参考
文本
使用以下类添加文本颜色，链接悬停时会变暗
| 类 | 描述 | 示例 |
|---|---|---|
| .text-muted | 使用类“text-muted”设置的文本 | 试试 |
| .text-primary | 使用类“text-primary”设置的文本 | 试试 |
| .text-success | 使用类“text-success”设置的文本 | 试试 |
| .text-info | 使用类“text-info”设置的文本 | 试试 |
| .text-warning | 使用类“text-warning”设置的文本 | 试试 |
| .text-danger | 使用类“text-danger”设置的文本 | 试试 |
背景
使用以下类添加背景颜色。链接悬停时会变暗，就像文本类一样
| 类 | 描述 | 示例 |
|---|---|---|
| .bg-primary | 表格单元格使用类“bg-primary”设置 | 试试 |
| .bg-success | 表格单元格使用类“bg-success”设置 | 试试 |
| .bg-info | 表格单元格使用类“bg-info”设置 | 试试 |
| .bg-warning | 表格单元格使用类“bg-warning”设置 | 试试 |
| .bg-danger | 表格单元格使用类“bg-danger”设置 | 试试 |
其他
| 类 | 描述 | 示例 |
|---|---|---|
| .pull-left | 将元素浮动到左侧 | 试试 |
| .pull-right | 将元素浮动到右侧 | 试试 |
| .center-block | 将元素设置为 display:block，并设置 margin-right:auto 和 margin-left:auto | 试试 |
| .clearfix | 清除浮动 | 试试 |
| .show | 强制元素显示（display:block） | 试试 |
| .hidden | 强制元素隐藏（display:none） | 试试 |
| .invisible | 强制元素不可见（visibility:hidden）。即使不可见，也会占用页面空间 | 试试 |
| .sr-only | 隐藏元素，除了屏幕阅读器 | 试试 |
| .sr-only-focusable | 与 .sr-only 结合使用，以便在元素获得焦点时（例如，通过仅键盘的用户）再次显示元素 | 试试 |
| .text-hide | 帮助用背景图片替换元素的文本内容 | 试试 |
| .close | 表示关闭图标 | 试试 |
| .caret | 表示下拉功能（会在下拉菜单中自动反转） | 试试 |
响应式实用程序
这些类用于通过媒体查询根据设备显示和/或隐藏内容。
使用一个或多个可用类来切换跨视窗断点的内容
| 类 | 超小型设备 手机 (<768px) | 小型设备 平板电脑 (≥768px) | 中型设备 台式机 (≥992px) | 大型设备 台式机 (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
| .visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
| .visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
| .visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
隐藏
根据屏幕尺寸隐藏元素
示例
<h2>示例</h2>
<p>调整此页面大小，查看以下文本如何变化：</p>
<h1 class="hidden-xs bg-danger">此文本在超小型屏幕上隐藏。</h1>
<h1 class="hidden-sm bg-info">此文本在小型屏幕上隐藏。</h1>
<h1 class="hidden-md bg-warning">此文本在中型屏幕上隐藏。</h1>
<h1 class="hidden-lg bg-success">此文本在大型屏幕上隐藏。</h1>
结果
示例
调整此页面大小，查看以下文本如何变化
此文本在超小型屏幕上隐藏。
此文本在小型屏幕上隐藏。
此文本在中型屏幕上隐藏。
此文本在大型屏幕上隐藏。
从 v3.2.0 版本开始，.visible-*-* 类有三个变体，每个变体对应一个 CSS display 属性值
| 类组 | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
例如，对于小型（sm）屏幕，可用的 .visible-*-* 类是：.visible-sm-block、.visible-sm-inline 和 .visible-sm-inline-block。
从 v3.2.0 版本开始，.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类已弃用。
示例
<h2>示例</h2>
<p>调整此页面大小，查看以下文本如何变化：</p>
<h1 class="visible-xs">此文本仅在超小型屏幕上显示。</h1>
<h1 class="visible-sm">此文本仅在小型屏幕上显示。</h1>
<h1 class="visible-md">此文本仅在中型屏幕上显示。</h1>
<h1 class="visible-lg">此文本仅在大型屏幕上显示。</h1>
结果
示例
调整此页面大小，查看以下文本如何变化
