## 响应式工具 为了更好的在移动设备上展示页面效果，利用媒体查询和一些工具类可以更好地针对不同的移动设备隐藏或者显示网页内容。 **可用的类** 通过单独或联合使用以下列出的类，可以针对不同移动设备屏幕尺寸隐藏或显示页面内容。 | |超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |---| --- | --- | --- | --- | | .visible-xs-*| 可见 | 隐藏 | 隐藏 | 隐藏 | | .visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 | | .visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 | | .visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 | | .hidden-xs | 隐藏 | 可见 | 可见 | 可见 | | .hidden-sm | 可见 | 隐藏 | 可见 | 可见 | | .hidden-md | 可见 | 可见 | 隐藏 | 可见 | | .hidden-lg | 可见 | 可见 | 可见 | 隐藏 | 对于visible显示的内容 \* 部分可以有3种取值，分别是: 1.block以块元素的形式显示.    2.inline以行内元素的形式显示 .  3.inline-block以行内块元素的形式显示. ***** **打印类** 和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。 | class | 浏览器 | 打印机 | | --- | --- | --- | | .visible-print-block 、 .visible-print-inline 、 .visible-print-inline-block | 隐藏 | 可见 | | .hidden-print | 可见 | 隐藏 | 调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类，在实际项目中要按照项目的需求运用这些工具类。案例可以参照bootstrap官网案例。