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>Example</h2><p>Resize this page to see how the text below changes:</p><h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1><h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1><h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1><h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
结果:
实例
调整此页面的大小以查看下面的文本如何变化:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
从 v3.2.0 开始，.visible-- 类有三个变量，每个 CSS 显示属性值一个:
| Group of classes | 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。
.visible-xs, .visible-sm, .visible-md, 和 .visible-lg 在 v3.2.0 中被弃用。实例
<h2>Example</h2><p>Resize this page to see how the text below changes:</p><h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1><h1 class="visible-sm">This text is shown only on a SMALL screen.</h1><h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1><h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
结果:
实例
调整此页面的大小以查看下面的文本如何变化: