bootstrap学习之布局（栅格布局）

bootstrap学习之布局（栅格布局）
今天自己在网上学习了BOOTSTRAP栅格系统，很有体会，希望将自己的学习心得写写下来供自己日后参考学习

1.什么是栅格布局？
以前的网页制作布局用的是tabel布局，通过把表格将网页分为大大小小的表格，再从表格中填充元素。后来发展为div+css布局。通过div+css浮动。flaot:right和float:left.布局。现在bootstrap运用的是栅格布局。简单来说就是把一行分为12个栅格。将12个栅格分配给不同的DIV元素来进行布局。

2.如何实现栅格布局?
首先，使用bootstrap由很多方式，webpack加载或者使用CND引用等。我是直接从CDN上下载3.37版本到本地。再通过link标签引用。这点和引用Jquery类似。
其次，根据布局分配栅格。举个例子，比如说要实现水平的三列等大布局。那么就给每个DIV分配12/3=4个栅格，
如果是三列不等大的，左边大约为3个栅格，中间为5个，右边为4个

3.栅格布局class参数是什么意思?
栅格的class有四个col-lg-1，col-md-1，col-sm-1,col-xs-1,分别对应大屏幕（large)，中等屏幕（middl），小屏幕（smll），极小（xs）。其中col表示列的意思column，中间为尺寸的缩写，最后是div分配的栅格大小（例子是占用的是1/12）

4.响应式布局？
栅格布局通过简单的bootstrap类引用便可以实现网页布局。这点十分强大好用，而另一个强大之处在bootstrap栅格系统可以实现响应式布局。简单来说，响应式布局就是在不同的终端，比如手机浏览器，和PC浏览器之间不同屏幕大小自动适应，调整布局。比如说。一个三列的水平布局在PC端为三列，在手机端屏幕变小的时候便自动切换为2列，从而不影响文字阅读。

5.如何使用响应布局？
就拿上面的一行三列来说。如果说在电脑上为3,5,4布局，col-md-3，col-md-5，col-md-4，到了手机上我们想变为两列布局（4,8），最后一列隐藏。那么我们可以在div中引用对应的两个class。col-sm-4，col-sm-8，hidden-sm