文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！
响应式工具
为了加快“适应移动客户端”的开发，可以使用这些实用工具类，从而实现根据媒体查询条件，基于设备特征，显示或隐藏内容。bootstrap还包括了在打印时决定内容显示与否的实用工具类。
可以试着恰到好处地使用它们，避免滥用它们，从而变成为同一个站点创建一个完全不同的版本。只需要用它们去完成每个设备上呈现的效果。
可用的类
- 当视口宽度等于或宽于给定的分隔点时，
.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 | |
|---|---|---|
.visible-print-block | 隐藏 | 可见 (as display: block) |
.visible-print-inline | 隐藏 | 可见 (as display: inline) |
.visible-print-inline-block | 隐藏 | 可见 (as display: inline-block) |
.hidden-print | 可见 | 隐藏 |
测试实例
改变你的浏览器的尺寸，或者在不同的设备中载入，以测试响应式实用工具类。
绿色的标签表明这些元素在你当前视口中是可见的。
发布评论