响应式隐藏显示

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

有针对性的使用这类工具类,从而避免为同一个网站创建完全不同的版本。相反,通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类

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

超小屏幕
手机 (<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;

打印类

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

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

已是最新文章

总计 0 评论

发表评论

作为 登录 | 登出 »

人气排行

联系电话

18321263196

交换链接

互相学习

服务咨询

我的微信