转载 

Bootstrap 响应式实用工具——visible-xs、visible-sm、hidden-xs、hidden-sm等

分类:    3636人阅读    IT小君  2016-05-23 12:42

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>

点击广告,支持我们为你提供更好的服务

现代时尚家具公司网站模板

html5 canvas进度条圆环图表统计动画特效

网页设计开发公司网站模板

js+css3抽奖转盘旋转点餐代码

css鼠标跟随文字模糊特效

响应式时尚单品在线商城网站模板

有机水果蔬菜HTML5网站模板

canvas炫酷鼠标移动文字粒子特效

jQuery右端悬浮带返回顶部特效

html5 canvas彩色碎片组合球形旋转动画特效

css+js实现的颜色渐变数字时钟动画特效

中小型创意设计服务公司网站模板

HTML5 Canvas竖直流动线条背景动画特效

小众时尚单品在线电子商务网站模板

HTML5现代家居装潢公司网站模板

响应式咖啡饮品宣传网站模板

响应式太阳能能源公司网站模板

HTML5数字产品服务公司网站模板

html5 svg夜空中星星流星动画场景特效

html5图标下拉搜索框自动匹配代码

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务