bootstrap之容器

容器

即css中所说的盒子，一个盒子就是一个容器，下面可以通过对盒子的操作把它分为不同的几种容器

分三类：

流体容器
固定容器
栅格布局（栅格系统）

流体容器和固定容器不能互相嵌套
固定容器有阈值

流体容器：

就相当于width设置为100%，即元素可以随着页面宽度的变化而发生变化，即元素的宽度跟页面宽度始终保持一致。
给元素设置class为container-fluid可以把元素设置为流体容器

固定容器：

在页面width高于768px时，容器的大小(width)在某些阶段是固定的值，不会因为页面变化而变化
给元素设置class为container可以把元素设置为固定容器

阈值即元素在其页面width处于某些值的时候元素大小会改变时其页面width的值

阈值：
	1200px：当页面width大于或等于1200px  容器大小即width值，变为1170px(1140px+30px槽宽)
	992px：当页面width大于或等于992px小于1200px  容器大小即width值，变为970px(940px+30px槽宽)
	768px：当页面width大于等于768小于992的时候，容器大小即width值，变为750px(720px++30px槽宽)
	小于768px：容器大小即width值变为auto

这里的槽宽即左右两边的槽宽和（一边为15px）

阈值的意义：

页面width>=1200px：应对大屏pc端，称为lg
1200px>页面width>=992px：应对中屏pc端，简称md
992px>页面width>=768px：应对平板，简称sm
小于768px：应对移动端，称为xs

这里当设置容器为栅格类型的时候，他class中的col-xx-数值中的xx的意义是为了适应不同的终端而设置的，比如这里，设置xx为xs即移动端，则无论页面多小他都不会变为不同行

当设置为lg则一但页面大小低于1200px则会栅格自动换行

槽宽：即如图整个固定容器长度为970px，然后在bootstrap中为了防止各个容器中的内容挨的太近，然后设置了槽宽就图中红线圈起来的两块，每个容器都有槽宽，即内边距(padding)


这是固定和流体容器的公共部分的源码，红线标注的地方就是定义槽宽的地方，绿线定义的是一个变量，他在源码中设置的值为30px即设立@gutter默认值为30px所以下面的槽宽默认值都是15px，这里的floor和ceil是bootstrap中提供的两个函数

栅格布局（栅格系统）

设置盒子(容器)class为row把容器分为12部分(bootstrop固定分为12部分)
语法：
<div class="row"></div>
盒子中可以设置子元素盒子(容器)，每个子元素可以设置占几个格子
语法：
<div class="col-lg-值"></div>
值可取(1~12)
代表着他的子元素占父元素的几格
可以用这个设置表格

width设置为auto和设置为100%的区别
width设置为100%和设置为auto不是一个意思，当width设置为100%即意思为内容区占父元素内容区宽度的全部，这种情况下设置内边距(padding)则内容区大小不会变，内边距向外扩充，整个盒子，即容器变大。
当width设置为auto即意思是设置width设置为自动调节内容区大小以适应父元素内容区大小，这种情况下设置内边距(padding)则会变化内容区大小，以设置内边距。整个盒子，即容器大小不变。

液体容器和固体容器的异同

液体容器和固体容器公共样式：

margin-right:auto
margin-left:auto
padding-left:15px
padding-right:15px

固定容器的特定样式：

上面是固定容器一部分源码，这段源码意思就是当页面处在不同的尺寸，我们就会运行相应的代码部分来设置固定容器的宽度(行)，因为此时页面大小处在1200px之上，所以下面两段代码没有读到，当小于1200px就会读到下面的代码，然后下面设置的width值就会覆盖上面的width值，所以当我们自己写这种响应式页面的代码的时候，代码顺序一定不要搞错