响应式布局 （bootstrap）

响应式布局

一、响应式开发

/* 通过媒体查询来设定容器的宽度大小 */
        @media screen and (max-width: 767px) {
          
   
            .container {
          
   
                width: 100%;
            }
        }

        @media screen and (min-width: 768px) {
          
   
            .container {
          
   
                width: 750px;
            }
        }

        @media screen and (min-width: 992px) {
          
   
            .container {
          
   
                width: 970px;
            }
        }

        @media screen and (min-width: 1200px) {
          
   
            .container {
          
   
                width: 1170px;
            }
        }

二、bootstrap前端开发框架

三、bootstrap栅格系统

例如：

<div class="container">
	<div class="row">
		<!-- 一共有四个盒子 共12等份 因此每个盒子占3份-->
		<div class="col-lg-3">1</div>
		<div class="col-lg-3">2</div>
		<div class="col-lg-3">3</div>
		<div class="col-lg-3">4</div>
	</div>
	<div class="row">
		<!-- 一共有四个盒子 共12等份 并且可以设置不同的屏幕尺寸所占的份数-->
		<div class="col-lg-6 col-md-4">1</div>
		<div class="col-lg-2 col-md-4">2</div>
		<div class="col-lg-2 col-md-4">3</div>
		<div class="col-lg-2 col-md-4">4</div>
	</div>
</div>

注意：如果相加小于12份，则占不满container，如果大于12份，多余的的列会另起一行显示

列嵌套 列偏移：相当于margin-left 列排序 显示与隐藏

案例：阿里百秀 静态网站：