W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 响应式工具



为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。


可用的类

通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

CSS display
visible-*-block display: block;
visible-*-inline display: inline;
visible-*-inline-block display: inline-block;

因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block.visible-xs-inline.visible-xs-inline-block

.visible-xs.visible-sm.visible-md.visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

Example

<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>

Result:

Example

Resize this page to see how the text below changes:

This text is shown only on an EXTRA SMALL screen.

This text is shown only on a SMALL screen.

This text is shown only on a MEDIUM screen.

This text is shown only on a LARGE screen.


尝试一下 »

打印类

和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容。

浏览器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block
隐藏 可见
.hidden-print 可见 隐藏

.visible-print 类也是存在的,但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同,除了 <table> 相关元素的特殊情况外。