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

<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>

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有