一、Bootstrap 网格系统的工做原理

1.1 十二栅格系统

栅格就是网格，英文Grid，之因此有的地方是网格，有的地方是栅格，只是翻译习惯不一样。十二栅格系统的意思是将整个屏幕按宽度划分为十二等份，而一等分表明屏幕宽度的十二分之一，为何划分为十二等份，而不是十等分或其余等份呢，这是由于12是1，2，3，4，6的最小公倍数，根据经验，按照这样的划分是最美观和实用的。固然，我也见过36栅格和十栅格系统，从使用上来看，确实不如12栅格方便。bootstrap

在十二栅格系统，若是我想把屏幕分为左右两侧，左边占三分之一，右边占三分之二，则能够将左边宽度设置为4栅格，右边设置为8栅格。若是我须要左右各站一半，只须要设置每一个为6栅格。若是我只须要设置一个页面占满屏幕，能够直接设置为12栅格。你看，是否是很方便？浏览器

1.2 Bootstrap 网格系统标签

Bootstrap 网格系统设计三个标签，分别是container，row，col：markdown

container是容器，在上一节中，专门作了详细的介绍。
row是行的意思，表明着一个水平行
col是单元格，表明着具体每个单元格，其写法有三种：col、col-栅格数（如col-3）、col-屏幕大小-栅格数（如col-md-3）。

下面是一段示例代码，将屏幕划分为三个等宽的单元，先不用深究具体代码的写法，只须要简单了解一下网格系统的结构便可，后面咱们会详细说明。框架

<div class="container">
    <div class="row"> <div class="col"> 第一个单元 </div> <div class="col"> 第二个单元 </div> <div class="col"> 第三个单元 </div> </div>
</div>
复制代码

1.3 Bootstrap 网格系统规则

使用行（row）来建立列的水平组。布局
一个页面内能够有多个行。post
行必须放置在容器（container）内，以便得到适当的对齐（alignment）和内边距（padding）。学习
内容应该放置在列（col）内，且惟有列能够是行的直接子元素。
列内还能够嵌套行，列内的行无需container，由于列自己就是个容器。
能够直接使用预约义的网格类，好比 col-屏幕大小-栅格数，用于快速建立栅格布局。
预约义类中，屏幕大小有5个值，主要用于响应式设计，见3.1。栅格数为数字1到12，表明占屏幕宽度。

二、Bootstrap 网格系统中单元格宽度设置

2.1 默认等宽布局

若是咱们不设置每一个列的宽度，则默认有多少个列都会平均分布各列所占宽度，可是若是一行有超过12个列，将会出现不可预知的现象（我是为了研究一下作了几个测试，你没有必要去测试这个，若是你想布局超过12个，能够用表格）。下面我给出一段代码，后面将一直沿用这段代码，作一些微小的更改，不在重复给出。

采用col、col-栅格数设置宽度的时候，预览效果请把窗口宽度设置为最大，不然可能会致使效果误差，另外咱们不建议实际应用中这样设置，请使用响应式网格布局，哪怕你不想响应。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
 
    <title>网格系统演示</title>
  </head>
  <body>
  
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    咱们在开发前端页面的时候，若是每个按钮、样式、处理浏览器兼容性的代码都要本身从零
                    开始去写，那就太浪费时间了。因此咱们须要一个框架，帮咱们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就能够了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵照它的标准，即便是没有学过网页设计的开发
                    者，也能作出很专业、美观的页面，极大地提升了工做效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    咱们在开发前端页面的时候，若是每个按钮、样式、处理浏览器兼容性的代码都要本身从零
                    开始去写，那就太浪费时间了。因此咱们须要一个框架，帮咱们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就能够了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵照它的标准，即便是没有学过网页设计的开发
                    者，也能作出很专业、美观的页面，极大地提升了工做效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    咱们在开发前端页面的时候，若是每个按钮、样式、处理浏览器兼容性的代码都要本身从零
                    开始去写，那就太浪费时间了。因此咱们须要一个框架，帮咱们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就能够了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵照它的标准，即便是没有学过网页设计的开发
                    者，也能作出很专业、美观的页面，极大地提升了工做效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    咱们在开发前端页面的时候，若是每个按钮、样式、处理浏览器兼容性的代码都要本身从零
                    开始去写，那就太浪费时间了。因此咱们须要一个框架，帮咱们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就能够了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵照它的标准，即便是没有学过网页设计的开发
                    者，也能作出很专业、美观的页面，极大地提升了工做效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
复制代码

这段代码效果显示如上图所示，你能够将下面单元格部分多复制几个，看一下效果。

<div class="col">
                <h1>Bootstrap是什么？</h1>
                <p> 咱们在开发前端页面的时候，若是每个按钮、样式、处理浏览器兼容性的代码都要本身从零 开始去写，那就太浪费时间了。因此咱们须要一个框架，帮咱们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就能够了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵照它的标准，即便是没有学过网页设计的开发 者，也能作出很专业、美观的页面，极大地提升了工做效率。 </p>
            </div>
复制代码

2.2 设置每一个列宽

试着将三个<div class="col">中的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的例子，将四个<div class="col">中的col都换为col-6，查看效果。

将2.1的例子，将四个<div class="col">中的col都换为col-12，查看效果。

将2.1的例子，将四个<div class="col">中的col都换为col-8，查看效果。

能够看出，虽然设置为col-8也能够每一个单元格一行，可是文字只占屏幕的十二分八，也就是三分之二，因此若是没有特殊要求，尽可能将每行的单元格数值相加正好为12。

三、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的例子，将四个<div class="col">都换成<div class="col-12 col-md-6 col-lg-4">，改变浏览器窗口大小，查看效果，这段代码的意思是<768px的时候，一行只有一列（每列宽12栅格），当768px<宽度<992px的时候是两列（每类宽6栅格），当大于992px的时候每行3列（每列宽4栅格）。下面是一段演示录像

固然你还能够换分的更细一点,换成<div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">。

在这里告诉你个小技巧，若是你想一行显示几列，宽度只就是用12除以几，哈哈，估计你也能想获得。

3.4 若是你不想响应

若是你想让全部的浏览器显示效果一致，都分为两列，也就是不想让它响应式显示，那么很简单，你把全部的屏幕下的栅格数设置相同的数值便可<div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">，这样就能够保持任何屏幕下一致了。

今天的课程就到这里，请关注我，及时学习俺老刘原创的《Bootstrap5零基础到精通》第五节 Bootstrap网页布局之列的布局与排序。

《Bootstrap5零基础到精通》第四节 Bootstrap网页布局网格系统