Bootstrap CSS Helper 类参考
文本
使用以下类通过文本颜色添加含义。 悬停时链接会变暗:
| 类 | 描述 | 实例 |
|---|---|---|
| .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 with margin-right:auto and 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 | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
Hidden 隐藏
根据屏幕大小隐藏元素:
实例
<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。
自 v3.2.0 起，.visible-xs, .visible-sm, .visible-md, 和 .visible-lg 类已弃用。
实例
<h2>Example</h2>
<p>调整此页面大小以查看下面的文本如何变化:</p>
<h1 class="visible-xs">此文本仅在特小屏幕上显示。</h1>
<h1 class="visible-sm">此文本仅在小屏幕上显示。</h1>
<h1 class="visible-md">此文本仅在 MEDIUM 屏幕上显示。</h1>
<h1 class="visible-lg">此文本仅在大屏幕上显示。</h1>
结果:
实例
调整此页面大小以查看下面的文本如何变化:
