bootstrap4 网格布局实例_Bootstrap4响应式布局之栅格系统

前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.(PS：更详细的介绍请访问原K先生的博客)

Bootstrap4栅格系统

栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕)的布局。Bootstrap4栅格系统共有五个类：

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

这些类的意思通俗点说就是，当你同时使用这些类的时候，它会根据你的屏幕大小来使相应的类生效。

下面我们再来看一下，这些类是怎么使用的

这个div中放置轮播图片，并且它占9列