Bootstrap CSS 帮助器类参考
文本
使用下面的类通过文本颜色添加含义。悬停时链接将变暗：
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | 尝试一下 |
| .text-primary | Text styled with class "text-primary" | 尝试一下 |
| .text-success | Text styled with class "text-success" | 尝试一下 |
| .text-info | Text styled with class "text-info" | 尝试一下 |
| .text-warning | Text styled with class "text-warning" | 尝试一下 |
| .text-danger | Text styled with class "text-danger" | 尝试一下 |
背景
使用下面的类通过背景颜色添加含义。链接将在悬停时变暗，就像文本类一样：
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | 尝试一下 |
| .bg-success | Table cell is styled with class "bg-success" | 尝试一下 |
| .bg-info | Table cell is styled with class "bg-info" | 尝试一下 |
| .bg-warning | Table cell is styled with class "bg-warning" | 尝试一下 |
| .bg-danger | Table cell is styled with class "bg-danger" | 尝试一下 |
其他
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | 尝试一下 |
| .pull-right | Floats an element to the right | 尝试一下 |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | 尝试一下 |
| .clearfix | Clears floats | 尝试一下 |
| .show | Forces an element to be shown (display:block) | 尝试一下 |
| .hidden | Forces an element to be hidden (display:none) | 尝试一下 |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | 尝试一下 |
| .sr-only | Hides an element to all devices except screen readers | 尝试一下 |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | 尝试一下 |
| .text-hide | Helps replace an element's text content with a background image | 尝试一下 |
| .close | Indicates a close icon | 尝试一下 |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) | 尝试一下 |
响应式实用程序
这些类用于通过媒体查询按设备显示和/或隐藏内容。
使用一个或多个可用类的组合来跨视口断点切换内容：
| 课程 | 超小型设备手机 (<768px) | 小型设备平板电脑 (≥768px) | 中型设备桌面 (≥992px) | 大型设备桌面（≥1200px） |
|---|---|---|---|---|
| .可见-xs-* | 可见的 | 隐 | 隐 | 隐 |
| .可见-sm-* | 隐 | 可见的 | 隐 | 隐 |
| .可见-md-* | 隐 | 隐 | 可见的 | 隐 |
| .可见-lg-* | 隐 | 隐 | 隐 | 可见的 |
| .hidden-xs | 隐 | 可见的 | 可见的 | 可见的 |
| .hidden-sm | 可见的 | 隐 | 可见的 | 可见的 |
| .hidden-md | 可见的 | 可见的 | 隐 | 可见的 |
| .隐藏-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>
结果：
Example
Resize this page to see how the text below changes:
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 一种display适当的值：
| 类群 | CSS显示 |
|---|---|
| 可见-*-块 | 显示：块； |
| .visible-*-内联 | 显示方式：内嵌； |
| .visible-*-内联块 | 显示：内联块； |
例如对于小（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>
结果：
Example
Resize this page to see how the text below changes: