什么是bootstrap自适应布局实现原理及其在不同屏幕尺寸下的自适应效果？

本文共计544个文字，预计阅读时间需要3分钟。

在Bootstrap中，自适应指的是根据根屏幕大小调整的布局大小。它将设备分为超小屏幕、小屏幕、中等屏幕和大屏幕四种，网页将根据不同屏幕尺寸分为12列，以行列形式排列，实现自适应布局。

在bootstrap中，自适应指的是根据屏幕大小把设备分为超小屏幕、中屏幕、中等屏幕、大屏幕四种，网页会根据设备屏幕不同，将网页分为12列，将浏览器以行列形式去划分实现自适应；自适应不管屏幕有多大，都尽量不换行，只是横向缩放。

本教程操作环境：Windows10系统、bootstrap5版、DELL G3电脑

什么是bootstrap自适应

bootstrap自适应:

Bootstrap根据屏幕大小把设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列

对应屏幕宽度为:

• 超小屏幕(手机):0-768px 对应设置 class=col-xs-number

• 小屏幕(平板):768-992px 对应设置class=col-sm-number

• 中等屏幕(电脑):992-1200px 对应设置 class=col-md-number

• 大屏幕(电脑):1200px-? 对应设置 class=col-lg-number

在chrome浏览器，elements窗口中会发现当屏幕宽度小于768时，

只有com-xs-12生效。