bootstrap自适应指的是什么

这篇文章主要介绍“bootstrap自适应指的是什么”，在日常操作中，相信很多人在bootstrap自适应指的是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”bootstrap自适应指的是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

在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生效。

自适应:网页适应不同设备 ,用bootstrap框架

原理:是媒体(设备/浏览器)查询 @media only screen 查询设备的宽度

bootstrap是自适应的；自适应指的是不管屏幕有多大，都尽量不换行，只是横向缩放，而bootstrap是通过栅栏系统实现自适应的；栅格系统通过定义容器的大小，将其分为12等份，将浏览器以行列形式去划分实现自适应。

示例如下：

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}

到此，关于“bootstrap自适应指的是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！