快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220
网站建设知识
十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决
Bootstrap中的网格系统是怎样的
本篇文章为大家展示了Bootstrap中的网格系统是怎样的，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联的客户来自各行各业，为了共同目标，我们在工作上密切配合，从创业型小企业到企事业单位，感谢他们对我们的要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站制作、成都网站设计、外贸营销网站建设、电商网站开发、微信营销、系统平台开发。
1、Bootstrap 网格系统的工作原理
1.1 十二栅格系统
栅格就是网格，英文Grid，之所以有的地方是网格，有的地方是栅格，只是翻译习惯不同。十二栅格系统的意思是将整个屏幕按宽度划分为十二等份，而一等分代表屏幕宽度的十二分之一，为什么划分为十二等份，而不是十等分或其他等份呢，这是因为12是1，2，3，4，6的最小公倍数，根据经验，按照这样的划分是最美观和实用的。当然，我也见过36栅格和十栅格系统，从使用上来看，确实不如12栅格方便。
在十二栅格系统，如果我想把屏幕分为左右两侧，左边占三分之一，右边占三分之二，则可以将左边宽度设置为4栅格，右边设置为8栅格。如果我需要左右各站一半，只需要设置每个为6栅格。如果我只需要设置一个页面占满屏幕，可以直接设置为12栅格。你看，是不是很方便？
1.2 Bootstrap 网格系统标签
Bootstrap 网格系统设计三个标签，分别是container，row，col：
下面是一段示例代码，将屏幕划分为三个等宽的单元，先不用深究具体代码的写法，只需要简单了解一下网格系统的结构即可，后面我们会详细说明。
第一个单元
第二个单元
第三个单元
1.3 Bootstrap 网格系统规则
使用行（row）来创建列的水平组。
一个页面内可以有多个行。
行必须放置在 容器（container）内，以便获得适当的对齐（alignment）和内边距（padding）。
内容应该放置在列（col）内，且唯有列可以是行的直接子元素。
列内还可以嵌套行，列内的行无需container，因为列本身就是个容器。
可以直接使用预定义的网格类，比如 col-屏幕大小-栅格数，用于快速创建栅格布局。
预定义类中，屏幕大小有5个值，主要用于响应式设计，见3.1。栅格数为数字1到12，代表占屏幕宽度。
2、Bootstrap 网格系统中单元格宽度设置
2.1 默认等宽布局
如果我们不设置每个列的宽度，则默认有多少个列都会平均分布各列所占宽度，但是如果一行有超过12个列，将会出现不可预知的现象（我是为了研究一下做了几个测试，你没有必要去测试这个，如果你想布局超过12个，可以用表格）。下面我给出一段代码，后面将一直沿用这段代码，做一些微小的更改，不在重复给出。
采用col、col-栅格数 设置宽度的时候，预览效果请把窗口宽度设置为最大，否则可能会导致效果偏差，另外我们不建议实际应用中这样设置，请使用响应式网格布局，哪怕你不想响应。
网格系统演示
Bootstrap是什么？
我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
者，也能做出很专业、美观的页面，极大地提高了工作效率。
Bootstrap是什么？
我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
者，也能做出很专业、美观的页面，极大地提高了工作效率。
Bootstrap是什么？
我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
者，也能做出很专业、美观的页面，极大地提高了工作效率。
Bootstrap是什么？
我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
者，也能做出很专业、美观的页面，极大地提高了工作效率。
这段代码效果显示如上图所示，你可以将下面单元格部分多复制几个，看一下效果。
Bootstrap是什么？
我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
者，也能做出很专业、美观的页面，极大地提高了工作效率。
2.2 设置每个列宽
试着将三个中的col分别换为col-3，col-6，col-3或者其他的数值，总之三个数相加和为12即可。当然你也可以删除或者增加一个或几个单元格，总之一行的和为12即可。
通过这样的简单设置，可以非常方便的修改单元格的宽度。
下图是设置为col分别换为col-2，col-2，col-4，col-4显示效果
2.3 可变宽度的列
如果你在设置单元格数值的时候，如果有三个单元格，只设置了一个，则剩下的两个单元格会平分剩下的空间，这样就可以很方便的设置可变宽度的列了。提醒一下，设置固定值的单元格并不需要在前面，比如，2.1代码你可以设置第二个单元格占屏幕一般（col-6），其他单元格平均分配。
2.4 自动换行的列
当每个单元格都设置了宽度数值，当一行中，剩下的空间不再容纳某个单元格的时候，会自动换行。
将2.1的例子，将四个中的col都换为col-6，查看效果。
将2.1的例子，将四个中的col都换为col-12，查看效果。
将2.1的例子，将四个中的col都换为col-8，查看效果。
可以看出，虽然设置为col-8也可以每个单元格一行，但是文字只占屏幕的十二分八，也就是三分之二，所以如果没有特殊要求，尽量将每行的单元格数值相加正好为12。
3、Bootstrap 网格响应式布局
3.1 什么是响应式布局
关于响应式布局，简单来说就是在不同屏幕大小的时候，展现出的页面布局不同。例如手机看的时候一行只有一个单元格，平板看的时候一行两个单元格，电脑看的时候有三个。Bootstrap可以很方便的实现这种功能。
3.2 Bootstrap 网格系统屏幕大小划分
看看下面的表格，是不是很熟悉，和断点的规定一模一样，只是多了个xs而已，其实默认就是xs，所以可以直接省略。可以看到，Bootstrap通过5个断点，将屏幕分为6种大小类型。
| xs
<576px | sm
≥576px | md
≥768px | lg
≥992px | xl
≥1200px | xxl
≥1400px | | Container容器 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| 屏幕大小类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
3.3 Bootstrap 网格响应式布局实例
将2.1的例子，将四个都换成
，改变浏览器窗口大小，查看效果，这段代码的意思是<768px的时候，一行只有一列（每列宽12栅格），当768px<宽度<992px的时候是两列（每类宽6栅格），当大于992px的时候每行3列（每列宽4栅格）。
下面是一段演示录像
当然你还可以换分的更细一点,换成。
在这里告诉你个小技巧，如果你想一行显示几列，宽度只就是用12除以几，哈哈，估计你也能想得到。
3.4 如果你不想响应
如果你想让所有的浏览器显示效果一致，都分为两列，也就是不想让它响应式显示，那么很简单，你把所有的屏幕下的栅格数设置相同的数值即可