制作栅格模态框 _栅格系统

撰写时间：2019年6月7日
【制作栅格模态框】下面我将给大家介绍如何制作一个的栅格系统，那么在做之前先得引用-js和它的CSS的插件脚本文件引进来我们就要熟悉的用法。而且栅格系统是中的核心，正是因为栅格系统的存在，才能有着这么强大的响应式布局。我们使用了栅格之后呢它就会随着我们的屏幕或可视的窗口尺寸的增加，系统就会自动分为最多12等份。然后，在.modal-body中加入.-fluid栅格系统
如下图所示：
它的工作原理如下：这个“行”必须包含在这两个容器的里面它以水平居中的方式来显示，而且两边有边距，当我们缩到最小的屏幕时，它就会充满父元素；那么.-fluid 它就会以百分之一百的宽度来显示，这样呢就会方便我们给它加上合适的排列和内边距的显示。
通过“行”在水平的方向创建一组“列” 。但列数之和不能超过平分的总列数（在超过时，多余部分会换行显示），它默认的是12等份，所以我们要平分这十二来设计整个栅格系统的模态框。
那么通过为它的“列”设置内边距的属性，从而创建列与列之间的间隔。通过为行的元素设置负值外边距从而抵消掉为 . 元素设置的内边距，也就间接为“行”所包含的“列”抵消掉了内边距。在栅格列中的内容排成一行。那么栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-4 来创建。
如果一“行”中包含了的“列”大于 12等份的话，那么它多余的“列”所在的元素将被作为一个整体另起一行排列，就是换行显示
即使我们有给出了它栅格的class，我们难免会碰到一些问题；比如说，在某些列的值很大的时候，他的某一些列可能会出现比其他的列高这样的情况。对于这一问题，我们就可以使用. 或者其它的响应式工具类来改变它的值大小，这样可以避免出现一些列存在高低不平衡的问题，上图中我就是给它们三个列使用了一个清除浮动“.”清除他们之间的浮动。

文章插图
上图就是我压缩之后的栅格系统的模态框，也就是响应式布局可以随意伸缩还可以还原来的样式而不变。在的框架的网格系统它还支持列的嵌套。我们也可以在一个列中添加一个或者多个行的容器，然后呢在这个行容器中插入列（像我上面介绍的一样使用列）。但是呢在列容器中的行容器，当它的宽度为100%的时候呢，也就是当前外部列的宽度。除此之外，栅格的类它还适用于与屏幕宽度大于或者说等于分界点大小的屏幕设备，并且针对它的一些小屏幕覆盖栅格类。因此，它在元素上应用任何的.col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的屏幕设备，并且针对小屏幕设备覆盖栅格类。所以，在元素上应用任何的像.col-lg-他是不存在，而且它会影响我们的大屏幕设备。个人就不建议用这个栅格类来做栅格系统的响应式布局。
下图我是一行十二等份分为三列，一列占四份“三乘四等于十二”就是十二，如果不平分各个所占的比例不一样，那么它就会出现参差不齐、高突的现象，所以才给它设置的比例一样。这样给人的感觉更好，看起来才会美观整洁。
效果图：
以上的就是栅格系统的模态框响应式布局，介绍到这里希望这个知识点能够对大家的学习有所帮助!