持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

前言

我们想要快速上手，使用Bootstrap5做出一个好看的页面我觉得首先就要学习Bootstrap5的网格系统。bootstrap中的网格系统与css的网格布局不太一样，之所以被称之为系统，是因为其中有很多的规则，并且其中的规则非常的详细，所以我们这篇文章先带大家快速的入门上手bootstrap网格系统，让大家感受到bootstrap网格系统的神奇。网格系统的内容比较多我们会分成几篇文章来讲。

网格系统

在bootstrap5官网中关于网格系统的介绍在布局中的Grid里面。

bootstrap5中的网格系统会把我们的画面分成十二等份，如果我们需要制作一个四栏的画面应该怎么做呢？

<div class="container">
        <div class="row">
            <div class="col-3">
                <img src="./40f153c93ea50aa1be5780519d94589.jpg" class="w-100">
                <div class="text">
                    Use our powerful mobile-first
                    flexbox grid to build layouts of
                    all shapes and sizes thanks to a twelve
                    column system, six default
                    responsive tiers, Sass variables and
                    mixins, and dozens of predefined classes.
                </div>
            </div>
        </div>
</div>

这里需要写四个一样的.col-3的div，这里代码太多我就省略。 这样就能实现我们一个四栏的效果，并且我们放大缩小窗口都能非常流畅的随着变化。

经过我们刚才的快速上手体验了下bootstrap5的网格系统是不是觉得bootstrap5非常的简单方便。

下面我们来系统的学习下刚才的知识点。

我们的网格系统可以大概分为三部分。

1.外部容器

如果是.container就是一个定宽容器，顾名思义就是固定宽度的容器，在不同的设备上的固定宽度也不同。如果要设置为满版则可以将class属性设为container-fluid。

2.row容器

.row创建了一行。.row容器主要在这里做了三件事情，首先就是把我们的容器分割，预设分割为12栏，各位有没有思考过，为什么是分割成12栏？不是10栏也不是8栏之类的。很简单除去5栏的情况，1-6都是的最小公倍数是12超过六栏的也比较少，所以是分割为12栏。其中的原理是使用了css的flex来排列出来的。第二就是让各个网格横向排列和换行。第三外部容器会有左右的paddingrow会把它抵消掉。这里的东西太多，以后涉及到了我们细讲。

3.col容器

.col则是创建了一列，.col容器中放置的就是每个栏。

网格用法

row容器里面是放置我们的网格，网格的用法呢大概有几种，我们这篇文章来介绍几种网格基本的用法。

自动分栏

我不想去管页面会分几栏，我们想要bootstrap帮我们自动的分栏。自动分栏我们这里使用.col。

我们这里写三个.col的网格容器就会自动分成三栏。

我们这里图片给了个class为w-100，意思就是css样式width: 100%;的意思。

我们再增加两个.col的网格容器，就会自动的分为5栏。

指定栏宽

自动分栏虽然很方便，但是栏宽是自动分配的并且不会换行，我们有时候需要指定指定栏宽，设置每一行有几栏，多的网格就会自动折行。我们前面讲过bootstrap网格系统会自动地将空间分成12栏，所以我们指定栏宽就指定每一个网格是十二分之几。

那么怎么做呢？很简单，比如，我们需要指定每个网格是十二分之三，就是分成每行三栏我们就把class值设置为col-3。

这样就指定每个网格占的空间是十二分之三，每行就分成四栏。

如果我们row容器中的网格超过了四栏的话会怎么样呢？

我们来写五个.col-3看一下。

超过了每行容纳的栏目，多的栏目就会自动的换行排列。

断点

Bootstrap 利用断点来确定响应式布局在设备或视口大小变化时的行为，该宽度可自定义。

简单的来说，bootstrap5会自动检测你的设备是什么，从而使网格系统自动的去适配你的设备。我们常用的设备比如手机、平板、电脑屏幕、超大屏幕等。

bootstrap5中默认内置了六个断点用于适配不同大小的设备。

断点	类中标识	设备尺寸
X-Small	--	<576px
Small	sm	>=576px
Medium	md	>=768px
Large	lg	>=992px
Extra large	xl	>=1200px
Extra extra large	xxl	>=1400px

当你的设备屏幕宽度匹配到对应的范围时我们在类中设置的对应的标识就会自动生效。我们下面就来实践一下。

如果我们制作个页面，我们希望在手机上是做成满版的，就是一行一栏，在平板以上的设备是三栏我们该怎么做呢？

<div class="col-12 col-md-4">
    <img src="./40f153c93ea50aa1be5780519d94589.jpg" class="w-100">
        <div class="text">
         Use our powerful mobile-first
         flexbox grid to build layouts of           
         all shapes and sizes thanks to a twelve           
         column system, six default           
         responsive tiers, Sass variables and        
         mixins, and dozens of predefined classes.                      
        </div>        
</div>            

我们这里网格容器的class设置两个值col-12和col-md-4，col-12用于指定在手机上是每行一栏，col-md-4指定为在中型以上的设备为三栏。

怎么查看在不同设备上的效果呢？我们先在浏览器中右键点击检查。

然后我们来查看在手机和平板还有电脑上分别是什么效果。

手机：

平板：

电脑：

在电脑上我们会感觉图片会有点大，如果这时候客户再提需求，需要在电脑屏幕上显示四栏呢?很简单，我们再在网格clss属性中加上值col-lg-3即可。

加上之后来看下效果。

上面那种写法会有点麻烦每个网格上都要写就会有很多的重复，还有一种写法，我们可以在row容器上来写。

这样写我们也能达到上面相同的效果。

总结

我们这里讲解了Bootstrap5的网格系统的入门以及简单的使用，其实我们的网格系统还有很多的东西，后面的文章我会一一介绍。喜欢的小伙伴们多多支持。