响应式实用程序（Responsive utilities）

优质

小牛编辑

131浏览

2023-12-01

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

谨慎使用这些，避免创建完全不同版本的同一站点。 Responsive utilities are currently only available for block and table toggling 。

类	设备
.visible-xs	visible超小（小于768px）
.visible-sm	小（最高768像素） visible
.visible-md	中等（768 px至991 px） visible
.visible-lg	visible更大（992像素及以上）
.hidden-xs	hidden超小（小于768px）
.hidden-sm	小（最多768像素） hidden
.hidden-md	中等（768 px至991 px） hidden
.hidden-lg	更大（992像素及以上） hidden

打印课程

下表列出了打印类。使用这些来切换要打印的内容。

类	打印
.visible-print	Yes Visible
.hidden-print	仅对浏览器不可打印。

例子 (Example)

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

<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>

Checkmarks表示该元素在当前视口中可见。