Bootstrap4响应式布局之栅格系统
前⾯说了Bootstrap4的下载和简单使⽤，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。⾯⽼K先来讲解⼀下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.（PS：更详细的介绍请访问原）
Bootstrap4栅格系统
栅格系统是基于⼀个12列、有5种响应尺⼨(对应不同的屏幕）的布局。Bootstrap4栅格系统共有五个类：
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或⼤于 576px
.col-md- 桌⾯显⽰器 - 屏幕宽度等于或⼤于 768px)
.col-lg- ⼤桌⾯显⽰器 - 屏幕宽度等于或⼤于 992px)
.col-xl- 超⼤桌⾯显⽰器 - 屏幕宽度等于或⼤于 1200px)
这些类的意思通俗点说就是，当你同时使⽤这些类的时候，它会根据你的屏幕⼤⼩来使相应的类⽣效。
下⾯我们再来看⼀下，这些类是怎么使⽤的
<div class="row">
<div class="col-9">这个div中放置轮播图⽚，并且它占9列</div>
<div class="col-3">这个div中放置排⾏榜，并且它占3列</div>
</div>container什么意思
我们需要把col类放到row类下，并且同⼀⾏中的数字相加为12，也就是上⾯代码中的col类，下⾯是⼤致效果图
最后在补充⼀点，栅格系统必须放在container容器类下，也就是说上⾯的代码外⾯还要再嵌套⼀层<div>，就是
<div class="container"></div>
接下来我们来看Bootstrap4栅格系统另⼀种使⽤⽅法：
下⾯这也是⽤栅格系统做的响应式布局，这是屏幕分辨率符合.col-md- 桌⾯显⽰器 - 屏幕宽度等于或⼤
于 768px)时的布局情况
下⾯是屏幕分辨率符合.col-sm- 平板 - 屏幕宽度等于或⼤于 576px时的布局。这时我们可以看到电影列表从⼀⾏6个变为了⼀⾏4个，也就是说它根据屏幕⼤⼩⾃动排列变化了这就是响应式。
下⾯我们看⼀下⼤致的布局代码
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3">这个div中放置要显⽰的各个电影
</div>
</div>
</div>
相信⼤家都能从这简单的代码中抓到重点。没错那就是col-md-2和col-sm-3类，我们前⾯说过栅格系统分为12列，也就是说⼀⾏会有12列，col-md-2的意思时每个电影图占据2个列，也就是说要满⾜⼀⾏12
列，就需要⼀⾏出现6个电影图，如上图确实是出现了六个电影图；col-sm-3类同理，4个电影图，3*4=12。好了，栅格系统暂时先介绍到这了，有什么不懂的可以给⽼K留⾔哦。