Bootstrap5中如何精确设置断点及容器尺寸应用？

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

目录

1.Bootstrap5断点

1.1 移动优先 1.2 Bootstrap断点

2.容器（Containers）

2.1 容器就是用来盛放东西的 2.2 Bootstrap容器的分类 2.3 容器随浏览器宽度变化解析 2.4 容器随浏览器宽度变化演示

目录

• 1、Bootstrap5的断点
• 1.1 移动优先
  
• 1.2 Bootstrap的断点
  
• 2、容器（Containers）
• 2.1 容器就是用来盛东西的
  
• 2.2 Bootstrap容器的分类
  
• 2.3 容器随浏览器宽度变化解析
  
• 2.4 容器随浏览器宽度变化演示代码
  

1、Bootstrap5的断点

1.1 移动优先

说到移动优先，先要提一下响应式设计，响应式界面就是设计一个页面能够适应不同的设备，响应式设计利用媒体查询等技术实现不同设备/窗口下的样式适配，也就是说它会根据你使用的不同设备展示不同的页面排版给用户。
这个实现起来就是根据html5有个媒体查询技术，可以获取屏幕宽度，然后利用css，在不同的宽度下使用不同的css效果即可。