响应式工具 | Responsive utilities

Responsive utilities

为了更快速地进行适合移动设备的开发，请使用这些实用程序类通过媒体查询显示和隐藏设备的内容。还包括打印时切换内容的实用程序类。

尝试在有限的基础上使用这些内容，并避免创建同一网站的完全不同版本。相反，使用它们来补充每个设备的显示。

可用的类

使用单个或组合的可用类切换视口断点上的内容。

​Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
.visible-xs-*VisibleHiddenHiddenHidden
.visible-sm-*HiddenVisibleHiddenHidden
.visible-md-*HiddenHiddenVisibleHidden
.visible-lg-*HiddenHiddenHiddenVisible
.hidden-xsHiddenVisibleVisibleVisible
.hidden-smVisibleHiddenVisibleVisible
.hidden-mdVisibleVisibleHiddenVisible
.hidden-lgVisibleVisibleVisibleHidden

从v3.2.0开始，.visible-*-*每个断点的类都有三种变化，每种类型display下面列出了一个CSS 属性值。

Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: 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的。.visible-*-block除了额外的切换<table>元素的特殊情况外，它们大致相当。

打印类

与常规响应类类似，请使用这些类别来切换要打印的内容。

ClassesBrowserPrint
.visible-print-block .visible-print-inline .visible-print-inline-blockHiddenVisible
.hidden-printVisibleHidden

该类.visible-print也存在，但从v3.2.0开始已被弃用。这大致相当于.visible-print-block，除了<table>相关元素的附加特殊情况。

测试用例

调整浏览器大小或在不同设备上加载以测试响应式实用程序类。

可见...

绿色的复选标记表示该元素在当前视口中可见。

Open example on getbootstrap.com

隐藏在......

这里，绿色的选中标记也表示该元素隐藏在当前的视口中。

Open example on getbootstrap.com