响应式(2)——bootstrap的响应式

标签：rip   via   dev   桌面   idt   排序   row   support   scala   

<meta name="viewport" content="width=device-width,user-scalable=no"/>

<href="bs/css/bootstrap.min.css"/>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

栅格系统

布局容器：

　　container  固定宽度

　　container-fluid(100%宽度)

　　lg　　大屏幕大桌面显示器（>=1200px）

　　md　 中等屏幕 桌面显示器（>=992px）

　　sm　 小屏幕 平板（>=768px）

　　xs　　超小屏幕 手机（<768px）

列偏移

　　.col-md-offset-*

列排序

　　.col-md-push-*和.col-md-pull-*

<div class="container">container</div>

<div class="container-fluid">

　　<div class="row">

　　　　<div class="col-md-2  col-md-offset-1 col-md-push-6  visible-xs">1</div>

　　　　//<div class="col-md-2  col-md-offset-1 col-md-push-6  hidden-xs">1</div> 在超小屏幕下隐藏

　　　　<div class="col-md-2  col-md-offset-4  col-md-pull-4">2</div>

　　</div>

</div>

响应式(2)——bootstrap的响应式

标签：rip   via   dev   桌面   idt   排序   row   support   scala   

原文地址：https://www.cnblogs.com/fxyg/p/9738951.html