Bootstrap实用工具

最新推荐文章于 2023-01-10 17:37:05 发布

花果山总钻风

最新推荐文章于 2023-01-10 17:37:05 发布

阅读量437

点赞数

分类专栏： BootStrap HTML/CSS/JS

HTML/CSS/JS 同时被 2 个专栏收录

46 篇文章 2 订阅

订阅专栏

BootStrap

26 篇文章 0 订阅

订阅专栏

http://blog.weiqinxue.cn/blogs/index.php/User/articleview/ArticleID/U2A162

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	只对浏览器可见，不可打印

实例

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

 
        <!DOCTYPE html> 
       
        <html> 
       
        <head> 
       
        <title>Bootstrap 实例 - 响应式实用工具</title> 
       
        <link href= 
        "/bootstrap/css/bootstrap.min.css" 
         rel= 
        "stylesheet" 
        > 
       
        <script src= 
        "/scripts/jquery.min.js" 
        ></script> 
       
        <script src= 
        "/bootstrap/js/bootstrap.min.js" 
        ></script> 
       
        </head> 
       
        <body> 
       
        <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" 
        >特别小型</span> 
       
        <span class= 
        "visible-xs" 
        >✔ 在特别小型设备上可见</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" 
        >小型</span> 
       
        <span class= 
        "visible-sm" 
        >✔ 在小型设备上可见</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" 
        >中型</span> 
       
        <span class= 
        "visible-md" 
        >✔ 在中型设备上可见</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" 
        >大型</span> 
       
        <span class= 
        "visible-lg" 
        >✔ 在大型设备上可见</span> 
       
        </div> 
       
        </div> 
       
        </body> 
       
        </html>

花果山总钻风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap实用工具

http://blog.weiqinxue.cn/blogs/index.php/User/articleview/ArticleID/U2A162Bootstrap 提供了一些帮助器类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表
复制链接

扫一扫

专栏目录