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>

结果:

实例

调整此页面大小以查看下面的文本如何变化:

此文本仅在特小屏幕上显示。

此文本仅在小屏幕上显示。

此文本仅在 MEDIUM 屏幕上显示。

此文本仅在大屏幕上显示。


亲自试一试 »