栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap 响应式实用工具 · Bootstrap教程

Bootstrap 响应式实用工具

Bootstrap 提供了一些帮助器类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。

需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

Class 设备
.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 及以上)隐藏

打印类

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

Class 打印
.visible-print 可见,可打印
.hidden-print 只对浏览器可见,不可打印

实例

下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类。




   Bootstrap 实例 - 响应式实用工具
   
   
   




   
      
         特别小型
         ? 在特别小型设备上可见
      
      
         小型
         ? 在小型设备上可见
      
      
      
         中型
         ? 在中型设备上可见
      
      
         大型
         ? 在大型设备上可见
      




结果如下所示:


响应式实用工具

勾号(?) 表示元素在当前视口中可见。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/10658.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号