📌  相关文章
📜  Bootstrap-响应式实用程序

📅  最后修改于: 2020-10-27 06:06:01             🧑  作者: Mango

 

Bootstrap提供了一些帮助程序类，以加快对移动设备的友好开发。这些可用于通过媒体查询，结合大型，小型和中型设备，按设备显示和隐藏内容。

谨慎使用这些文件，并避免创建同一网站的完全不同的版本。响应实用程序当前仅可用于块和表切换。

Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

打印类别

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

Classes Print
.visible-print Yes Visible
.hidden-print Visible only to browser not to print.

例

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

现场演示

   

      
      

         
         
         ✔ Visible on x-small
      

      
      

         
         
         ✔ Visible on small
      

      
      

      
      

         
         Medium
         ✔ Visible on medium
      

      
      

         
         
         ✔ Visible on large

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