Bootstrap响应式工具类

响应式工具类

Bootstrap提供了响应式类和打印机类。使用响应式类，可以针对不同设备显示或隐藏某些内容。使用工具类，可以针对打印机和浏览器显示或隐藏某些内容。

有针对性的使用这些工具类，可用避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类，可以在不同设备上提供不同的展现形式。

响应式类中，以.visible-开头的类表示仅在某尺寸的屏幕上显示，在其他屏幕上都隐藏；以.hidden-开头的类表示仅在某尺寸的屏幕上隐藏，在其他屏幕上都显示。通过单独或联合使用下表中列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

Bootstrap响应式工具类

从 v3.2.0 版本起，形如.visible-*-*的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的display属性，见下表：

Bootstrap响应式工具类

因此，以超小屏幕（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基本相同。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。