Bootstrap 全局CSS样式：响应式工具类的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

为了更好的在移动设备上展示页面效果，利用媒体查询和一些工具类可以更好地针对不同的移动设备隐藏或者显示网页内容。

可用的类

通过单独或联合使用以下列出的类，可以针对不同移动设备屏幕尺寸隐藏或显示页面内容，每个针对 CSS 中不同的display属性。如下表：

	超小屏幕手机 (<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以行内块元素的形式显示.

以超小屏幕（xs）为例，可用的.visible-*-*类是：.visible-xs-block、.visible-xs-inline和.visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md和.visible-lg类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了<table>相关元素的特殊情况外，它们与.visible-*-block基本相同。

---

打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

class	浏览器	打印机
.visible-print-block 、 .visible-print-inline 、 .visible-print-inline-block	隐藏	可见
.hidden-print	可见	隐藏

调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类，在实际项目中要按照项目的需求运用这些工具类。案例可以参照bootstrap官网案例。

---

就先分享到这里!! 😄 后续继续更新!!