bootstrap课程2 bootstrap的栅格系统的主要作用是什么

一、总结

一句话总结：响应式布局（就是适应不同的屏幕，手机，平板，电脑）

1、bootstrap的栅格系统如何使用？

row + col-md-4

2、bootstrap的栅格系统的主要作用是什么？

响应式布局（就是适应不同的屏幕，手机，平板，电脑）

3、bootstrap的容器是什么？

布局容器:

.container

24     
    
      25 
     Boostrap前端框架
 26 
     
       27 
      
        28 
        29 
      
 30 
     
 31

4、bootstrap右浮动是什么？

pull-right

5、手机根据宽高设置样式，而不是根据分辨率，为什么？

手机的分辨率现在很大，要是根据分辨率，字会小的看不清

6、为什么bootstrap不适合做颗粒特别小的网站？

上来很多控件（比如栅格）就给你加了内边距，如果左颗粒度比较小的网站，还得自己调，划不来

7、bootstrap栅格系统里面的col-md-4这句话的精髓是什么？

col-md-4把可用区域分成了四份，要是小于了我的最小宽度，我就跑到下一行，也就是电脑上面的很多横放的图片组到手机上面竖放的了。

8、bootstrap栅格系统中，电脑端和移动端（平板和手机）分别使用什么好？

电脑端使用中等屏幕的 .col-md-

移动端（平板和手机）使用小屏幕 .col-sm-

除这两个外，还有超小屏幕的.col-xs- 和大屏幕的 .col-lg-

9、栅格系统开发页面方便么？

开发的话会特别特别快，比如云之梦

二、bootstrap的栅格系统的主要作用是什么

1、相关知识

bootstrap安装:

html5文档类型:

<!doctype html>

移动端设备的真实宽度:

布局容器:

.container

栅格系统:

.row 一行12列

.col-md-4 占3列的宽

2、代码

1  2  3  4     
      5     index 6     
      7      8      9     10     22 23 24     
     
      25         
      Boostrap前端框架
26         
      
       27             
       
        28                 
        29             
       
30         
      
31     
     
32 33