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 | 表示下拉功能（在上拉菜单中会自动反转） | 试一试 |
响应式工具
这些类用于通过媒体查询按设备显示和/或隐藏内容。
使用一个或组合可用类，可在视口断点之间切换内容
| Classes | 超小设备 手机（<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 显示 |
|---|---|
| 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。
类 .visible-xs、.visible-sm、.visible-md 和 .visible-lg **从 v3.2.0 开始已弃用**。
示例
<h2>示例</h2>
<p>调整此页面大小以查看以下文本如何变化：</p>
<h1 class="visible-xs">此文本仅在超小屏幕上显示。</h1>
<h1 class="visible-sm">此文本仅在小屏幕上显示。</h1>
<h1 class="visible-md">此文本仅在中等屏幕上显示。</h1>
<h1 class="visible-lg">此文本仅在大屏幕上显示。</h1>
结果
示例
调整此页面大小以查看以下文本如何变化
