1. 程式人生 > >響應式(2)——bootstrap的響應式

響應式(2)——bootstrap的響應式

view war warning ble trap dia nbsp file ont

<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的響應式