在开发wb程序或者进行项目开发的时候，往往需要各种各样的方法来完成需要实现的功能，大多数情况我们的方法都是引用进来的，而不是都是自己编写的，因为那些引用进来的都是别人已经封装好了的，我们只需要直接引用就可以了，这样可以节省我们的很多时间和减少我们编写的代码量，就拿同行人员人尽皆知的bootstrap插件来说吧，好比如说我们需要进行搭建一个页面，这个时候，我们可以调用bootstrap它里面的封装好的布局，比如说栅格系统，我们在搭建页面的时候进行调用他们里面的方法，也就是css的类，它们里面都是封装好的css方法，我们在引用的时候，直接给布局元素添加上一个类名就可以了，
而我们也不需要进行什么宽度设计，也不需要在页面上进行调试宽度，这样既方便又快速，而且还有响应式的效果，所以引用适合的插件用它们已经存在的方法，是大大的节省了我们的编程时间，而且完成之后的效果也远比我们自己一个一个代码写出来的更加完善和美观，也极大限度的减少了我们编写的代码量。
那么我们在进行搭建页面的时候如何使用bootstrap的栅格系统呢，首先我们得引用bootstrap的插件
Bootstrap的插件有很多，封装着栅格系统的是Bootstrap众多插件中的bootstrap.min.css这一个插件
现在插件引用完成，紧接着就是页面的开始搭建了，栅格系统提供了集中内容居中、水平填充网页内容的方法，而且它存在五个栅格等级，每一个响应式分界点区分出来一个等级，也就是说：每一个等级都是根据响应式，屏幕的大小来区分的，当屏幕到达一定的宽度的时候，栅格等级就会发生变化，切换另一个栅格等级，下面介绍栅格系统的五个等级：
第一个等级：.col-*，
第二个等级：.col-sm-*,
第三个等级：.col-md-*，
第四个等级：.col-lg-*，
第五个等级：.col-xl-*，
*号代表数字
这五个等级的意思就是：
第一个等级的是覆盖所有设备的栅格，也就是适用于任何大小的屏幕，比如说如果要一次性定义从最小设备到最大设备相同的网格系统布局表现，请使用.col和.col-*类。后者是用于指定特定大小的(如.co-6)，否则使用.col就可以了。也可以说是适用于超小屏幕，也就是范围在小于576px的屏幕
第二个等级的是适用于小屏幕的栅格，也就是适用范围在大于和等于576px的屏幕
第三个等级的是适用于中等屏幕的栅格，也就是适用范围在宽度大于等于768px的屏幕
第四个等级的是适用于大屏幕的栅格，也就是适用范围在大于和等于992px的屏幕
第五个等级的是适用于超大屏幕的栅格，也就是适用范围在大于和等于1200px的屏幕
每一个等级都有12个栅格，这12个栅格的宽度是根据浏览器屏幕的宽度平分为12个部分的，所以每一个栅格的宽度都是一样的，而且这些栅格都是定义好样式的，如果我们在搭建页面的时候，比如需要让某一些同级别的HTML元素并排显示，在使用栅格系统搭建页面的话，可以省去自己为了让这些元素浮动或者转换为行内元素而编写设置的样式代码，因为栅格系统已经将这些都封装好了，下面是我演示的栅格系统的用法和效果
首先在使用栅格搭建页面的时候，得先在父元素上给他一个bootstrap定义好的类，这个类是代表行(.row代表行的意思)是列(.col-*代表列的意思)的横向组合和父容器(它们有效组织在行下)，每列都有水平的内边距值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。而且.row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...------《这段摘选自bootstrap的页面上说明》，在父元素上添加完row这个类的时候，就开始给下面的每一个行下面的同级别元素添加列，刚才已经说过了。每一个行下面的栅格等级都有12个部分，每一个部分都是相等的，像以上代码图里面的col-3,它代表的是每一个列的占3个部分，如果是col-5,那么代表的就是带有这个类名的列占5个部分，如果是col-6,那么代表的就是带有这个类名的列占6个部分，不过，一个行下面所有列的占用空间不可以大于12个部分，也就是一个row,行下面的列col全部加起来不可以大于12。
在使用了栅格系统的元素，同一个行里面的列的HTML元素，都是并排显示的，而不用我们再去给他们设置浮动或者转换行内元素的样式代码，因为这些在样式都在bootstrap里面已经给您封装好了。
除了它bootstrap插件里面已经封装好了的栅格之外，还有一个自定义栅格。
自定义栅格系统，就是在使用BootStrap v4内置的栅格系统之Sass变量和 maps文件，可以完全自定义自己的栅格格环境、并可以更改DIV层次、媒体查询维度和container容器宽度，然后重新编译。.------《这段摘选自bootstrap的页面上说明》
其次便是就是自定义列和间隙，就是以通过修改Sass变量、重定义栅格系统列的数量，使用$grid-columns命令可生成每个单独列的宽度（以百分比表示），同时$$grid-gutter-width允许在平行排列$padding-left和$padding-right对于平台间隔均匀分割的断点特定宽度。.------《这段摘选自bootstrap的页面上说明》
其实你还可以自定义网格，按照自己的喜欢和需要，自定义适合自己的网格，比如说：如果你只想要四个格子层，只要更新$$grid-breakpoints和$$container-max-widths等类参数。.------《这段摘选自bootstrap的页面上说明》
对Sass变量或map文件进行任何更改，都需要保存更改并重新编译。这样做将为列宽度，偏移量和排序输出一组全新的预定义栅格类。响应可见性实用程序也将更新为使用自定义断点，同时濂晨设置网格值时是采用px单位（而不是rem、em或%）。------《这段摘选自bootstrap的页面上说明》