Bootstrap5响应式设计：断点设置与多设备适配指南

响应式设计让网页适配多设备，Bootstrap5通过预设断点和组件简化实现，无需从零编写媒体查询。其默认六个断点（xs<576px、sm≥576px、md≥768px、lg≥992px、xl≥1200px、xxl≥1400px）是布局切换临界点。核心控制方式：一是响应式工具类（如d-sm-block在sm断点显示块级元素），可控制元素显示隐藏；二是栅格系统（row+col），列宽由断点前缀控制（如col-md-6表示中等屏幕以上占6列）。实战中，手机单列、平板双列、桌面三列布局，图片用img-fluid自适应，导航栏用汉堡菜单适配移动端。可通过CSS变量自定义断点。核心步骤：栅格列布局、工具类控制显示、图片自适应、导航折叠，简化响应式开发。