2.4、Bootstrap V4自学之路------布局---响应式工具

为什么80%的码农都做不了架构师？>>>   

可用的类

• 当视口宽度等于或宽于给定的分隔点时，.hidden-*-up类将隐藏该元素。比如说，.hidden-md-up将在中屏、大屏、特大屏视口中隐藏元素。

• 当视口宽度等于或窄于给定的分隔点时，.hidden-*-down将隐藏该元素，比如说，.hidden-md-down将在特小屏、小屏、中屏视口中隐藏元素。

• 你可以组合使用.hidden-*-up类以及.hidden-*-down类，以使元素只在一个给定的屏幕尺寸区间内显示。比如说，.hidden-sm-down.hidden-xl-up能使元素只在中屏和大屏视口中显示。使用多个.hidden-*-up类或多个.hidden-*-down类是多余而且无意义的。

• 当一个元素的可见性不能被表达为一个单独连续的视口尺寸范围时，这些类并不会支持这些比较少见的情况。在这种情况下，你必须改用自定义类。

	特小屏设备          手机竖屏(<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	可见	可见	可见	可见	隐藏

打印类

和常规的响应式类相似，用这些来决定哪些内容被打印出来。

Class	Browser	Print
.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页面重新设计。

转载于:https://my.oschina.net/asktao/blog/644034