当视口宽度等于或宽于给定的分隔点时,.hidden-*-up
类将隐藏该元素。好比说,.hidden-md-up
将在中屏、大屏、特大屏视口中隐藏元素。web
当视口宽度等于或窄于给定的分隔点时,.hidden-*-down
将隐藏该元素,好比说,.hidden-md-down
将在特小屏、小屏、中屏视口中隐藏元素。app
你能够组合使用.hidden-*-up
类以及.hidden-*-down
类,以使元素只在一个给定的屏幕尺寸区间内显示。好比说,.hidden-sm-down.hidden-xl-up
能使元素只在中屏和大屏视口中显示。使用多个.hidden-*-up
类或多个.hidden-*-down
类是多余并且无心义的。spa
当一个元素的可见性不能被表达为一个单独连续的视口尺寸范围时,这些类并不会支持这些比较少见的状况。在这种状况下,你必须改用自定义类。设计
特小屏设备 手机竖屏(<34em) | 小屏设备 手机横屏 (≥34em) | 中屏设备 平板电脑 (≥48em) | 大屏设备 桌面 (≥62em) | 特大屏设备 桌面 (≥75em) | |
---|---|---|---|---|---|
.hidden-xs-down |
隐藏 | 可见 | 可见 | 可见 | 可见 |
.hidden-sm-down |
隐藏 | 隐藏 | 可见 | 可见 | 可见 |
.hidden-md-down |
隐藏 | 隐藏 | 隐藏 | 可见 | 可见 |
.hidden-lg-down |
隐藏 | 隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xl-down |
隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.hidden-xs-up |
隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.hidden-sm-up |
可见 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.hidden-md-up |
可见 | 可见 | 隐藏 | 隐藏 | 隐藏 |
.hidden-lg-up |
可见 | 可见 | 可见 | 隐藏 | 隐藏 |
.hidden-xl-up |
可见 | 可见 | 可见 | 可见 | 隐藏 |
和常规的响应式类类似,用这些来决定哪些内容被打印出来。code
Class | Browser | |
---|---|---|
.visible-print-block |
隐藏 | 可见 (as display: block ) |
.visible-print-inline |
隐藏 | 可见 (as display: inline ) |
.visible-print-inline-block |
隐藏 | 可见 (as display: inline-block ) |
.hidden-print |
可见 | 隐藏 |
我以为这个部分是少数状况下使用的,我我的以为一个页面作成百变百适应的并不十分合理,适应屏幕大屏和特大瓶就足够了。app就交给app。或者手机端的web页面从新设计。table