跳到内容

响应实用程序

为了实现更快的移动友好开发,可以使用这些实用程序类通过媒体查询按设备显示和隐藏内容。还包括用于在打印时切换内容的实用程序类。

尽量在有限的基础上使用这些,避免为同一个网站创建完全不同的版本。相反,使用它们来补充每个设备的演示。


可用的类

使用单个或组合可用类来跨视口断点切换内容。

超小型设备手机(< 768 px) 小型设备平板电脑(≥768 px) 介质的设备台式电脑(≥992 px) 大型设备台式电脑(≥1200 px)
.visible-xs - * 可见
.visible-sm - * 可见
.visible-md - * 可见
.visible-lg - * 可见
.hidden-xs 可见 可见 可见
.hidden-sm 可见 可见 可见
.hidden-md 可见 可见 可见
.hidden-lg 可见 可见 可见

从v3.2.0开始,.visible - * - *每个断点的类有三种变体,每个CSS都有一种显示下面列出的属性值。

类组 CSS显示
.visible - *块 显示:块;
.visible - *内联 显示:内联;
.visible - * -inline-block 显示: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已弃用.它们近似等于.visible - *块,除了用于切换的其他特殊情况<表>有关的元素。


印刷类

与常规响应类类似,使用这些类来切换打印内容。

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

.visible-print也存在,但是弃用从v3.2.0开始。它近似等于.visible-print-block,除非有额外的特殊情况<表>有关的元素。


测试用例

调整浏览器大小或在不同设备上加载以测试响应实用程序类。


1.可见……

绿色复选标记表示该元素是可见的在当前视口中。

在x-small上可见
✔可见于小
媒介 ✔在媒体上可见
✔大量可见
在x-small和small上可见
在中型和大型上可见
在x-small和medium上可见
无论大小都可见
在x-small和large上可见
✔在中小型上可见

2.藏在……

在这里,绿色的复选标记也表示元素是隐藏的在当前视口中。

✔隐藏在x-small上
✔隐藏在小
媒介 ✔隐藏在介质上
适量隐藏
✔隐藏在x-small和small上
✔隐藏在中型和大型上
✔隐藏在x-small和medium上
✔隐藏在小的和大的
✔隐藏在x-small和large上
✔隐藏在小和中型