响应实用程序
为了实现更快的移动友好开发,可以使用这些实用程序类通过媒体查询按设备显示和隐藏内容。还包括用于在打印时切换内容的实用程序类。
尽量在有限的基础上使用这些,避免为同一个网站创建完全不同的版本。相反,使用它们来补充每个设备的演示。
可用的类
使用单个或组合可用类来跨视口断点切换内容。
超小型设备手机(< 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.藏在……
在这里,绿色的复选标记也表示元素是隐藏的在当前视口中。