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

2018-10-03 17:56:16来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

<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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS 小结笔记之em

下一篇:Vue : Expected the Promise rejection reason to be an Error