目录

Bootstrap - 响应式实用程序( Responsive utilities)

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-printYes 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表示该元素在当前视口中可见。

↑回到顶部↑
WIKI教程 @2018