2.2 响应式隐藏显示
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
主要用于针对不同屏幕尺寸,隐藏或显示页面内容。
|
超小屏幕 手机 (<768px) |
小屏幕 平板 (≥768px) |
中等屏幕 桌面 (≥992px) |
大屏幕 桌面 (≥1200px) |
.visible-xs-* |
可见 |
隐藏 |
隐藏 |
隐藏 |
.visible-sm-* |
隐藏 |
可见 |
隐藏 |
隐藏 |
.visible-md-* |
隐藏 |
隐藏 |
可见 |
隐藏 |
.visible-lg-* |
隐藏 |
隐藏 |
隐藏 |
可见 |
.hidden-xs |
隐藏 |
可见 |
可见 |
可见 |
.hidden-sm |
可见 |
隐藏 |
可见 |
可见 |
.hidden-md |
可见 |
可见 |
隐藏 |
可见 |
.hidden-lg |
可见 |
可见 |
可见 |
隐藏 |
类组 |
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 |
可见 |
隐藏 |