bootstrap--

媒体查询
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认为1.0）
minimum-scale：允许用户缩放到的最小比例（默认为1.0）
maximum-scale：允许用户缩放到的最大比例（默认为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
大型设备 ≥1200px class名 .col-lg 台式机
中型设备 ≥992px class名 .col-md 笔记本
小型设备 ≥768px class名 .col-sm 平板
超小设备 ＜768px class名 .col-xs 手机

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

大于 300 像素时

@media screen and (min-width:300px){
	body{
		background:orange;
	}
}

混用
当页面宽度大于960px小于1200px的时候执行下面的CSS

@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
}

Bootstrap网格的基本结构

<div class="container-fluid">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

-fluid 流动布局 width:100%;

row 行
col 列 col-?-num num最大值12占比100%
col-?-1 8.3%
col-?-2 16.6%
col-?-3 25%
col-?-4 33.3%
col-?-5 41.6%
col-?-6 50%
col-?-7 58.3%
col-?-8 66.6%
col-?-9 75%
col-?-10 83.3%
col-?-11 91.6%
col-?-12 100%

py-num mum:0~5 padding-top & padding-bottom
padding数值
-0 0rem
-1 0.25rem
-2 0.5rem
-3 1rem
-4 1.5rem
-5 3rem
px padding-left & padding-right
pl padding-left
pr paddinf-right
pt padding-top
pb padding-bottom
p-num padding

m-num num(0~5)
-0 0rem
-1 0.25rem
-2 0.5rem
-3 1rem
-4 1.5rem
-5 3rem
m-num margin
my margin-top & margin-buttom
mx magin-left & margin-buttom
ml margin-left
mr margin-right
mt margin-top
mb margin-buttom