筑坐极_Bootstrap创建响应式栅格布局

简单的了解一下 响应式栅格系统

通过定义容器大小，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局,页面元素宽度随着窗口调整而自动适配。每个屏幕分辨率下面会有一个布局样式，可以对元素位置和大小进行改变。再调整内外边距，就制作出了强大的响应式栅格系统。

Bootstrap容器

Bootstrap自带三种container宽度规范：

.container：居中，适配不同的端的 max-width 尺寸。

.container-fluid：全屏，适配屏幕的 width: 100% 尺寸。

.container-sm| md | lg | xl 在指定规格断上width: 100% 尺寸。

网格类

Bootstrap 5 网格系统有以下 6 个类:

col： column “列”的缩写

.col- 针对所有设备。

.col-sm- 平板 - 屏幕宽度等于或大于 576px。

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。

.col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。

.col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

这个类通过"-"分为三个部分，第三个部分的数字范围是1到12。就是可以把一个区域分为12个列，需要和“行（row）”联合使用。“行（row）”必须包含在 .container 或 .container-fluid 中，“列（col）包含在“行（row）”中，请看下面示例。

示例一：固定布局

Bootstrap创建响应式栅格布局

代码如下：

HTML部分代码

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

CSS部分代码

<style>

.mm-h50{

height: 50px;

color: #f0f0f0;

line-height: 50px;

text-align: center;

}

.mm-bg-01{

background-color: #3b3d8b;

}

.mm-bg-02{

background-color: lightsteelblue;

}

.mm-bg-03{

background-color: lightslategray;

}

</style>

示例二：响应式动态布局

Bootstrap创建响应式栅格布局

代码如下：

HTML部分代码

</div>

CSS部分代码同示例一

如有错误欢迎指正~

Bootstrap创建响应式栅格布局

赵美*

Bootstrap,CSS,响应式，栅格布局

通过定义容器大小，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局，页面元素宽度随着窗口调整而自动适配。

2023.02.21

326人

赵美*

未知

Hot:2025

赵美*

4.8分

继续努力!