響應式(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>
響應式(2)——bootstrap的響應式