Bootstrap响应式、移动设备优先的流式栅格系统显示隐藏页面内容

时间：6年前阅读：4270

Bootstrap响应式、移动设备优先的流式栅格系统

显示隐藏

　　为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用下面这些工具类可以方便的针对不同设备展示或隐藏页面内容

形如.visible-*-*的类针对每种屏幕大小都有三种变体，每个针对 CSS 中不同的display属性，如下所示

　因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block

　　比如，要实现≥992px时存在三列，(≥768px and <992px)的时候存在两列，(<768px)的时候只存在一列　

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<style>
.row div{border:1px solid black;}    
</style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-sm-6">aaa</div>
      <div class="col-md-4 col-sm-6 hidden-xs">bbb</div>
      <div class="col-md-4 hidden-sm hidden-xs">ccc</div>
    </div>
</div>
</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

Bootstrap响应式、移动设备优先的流式栅格系统显示隐藏页面内容

网友评论