Bootstrap - 响应式实用程序

Bootstrap 提供了一些方便的辅助类，用于更快速地进行移动端友好开发。这些类可以结合大型、小型和中型设备，通过媒体查询在不同设备上显示和隐藏内容。

谨慎使用这些类，避免创建同一网站的完全不同版本。响应式实用程序目前仅适用于块和表格切换。

类	设备
.visible-xs	超小屏幕（小于 768px）可见
.visible-sm	小屏幕（最大 768 px）可见
.visible-md	中屏幕（768 px 到 991 px）可见
.visible-lg	大屏幕（992 px 及以上）可见
.hidden-xs	超小屏幕（小于 768px）隐藏
.hidden-sm	小屏幕（最大 768 px）隐藏
.hidden-md	中屏幕（768 px 到 991 px）隐藏
.hidden-lg	大屏幕（992 px 及以上）隐藏

打印类

下表列出了打印类。将这些类用于切换打印内容。

类	打印
.visible-print	是可见
.hidden-print	仅对浏览器可见，不对打印可见。

示例

以下示例演示了如何使用上面列出的辅助类。调整浏览器大小或在不同设备上加载示例以测试响应式实用程序类。

在线演示

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

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

打印页面