Bootstrap 不负责实时功能，仅提供响应式布局和样式；实时数据更新依赖 WebSocket 或 setInterval + fetch，其核心作用是确保大屏容器稳定适配、不缩放失真。
直接说结论：Bootstrap 本身不负责“实时”，它只管布局和样式；真正让大屏动起来的是 WebSocket 或 setInterval + fetch，而 Bootstrap 的作用是把 div 摆得稳、撑得满、缩放不糊——这点没做对，再准的实时数据也白搭。
为什么不能只靠 Bootstrap 做实时？
Bootstrap 是 CSS 框架，不是通信层。它没有内置的长连接能力，也不处理数据更新逻辑。你看到的“实时刷新”效果，99% 是前端在 setInterval 里定时拉接口，或用 WebSocket 接收后主动调用 myChart.setOption() 更新 ECharts 图表。Bootstrap 只确保这些图表容器（比如 class="col-lg-4"）在 1920×1080 或 3840×2160 大屏上不换行、不溢出、字体不发虚。
- 常见错误现象：
box3_left.js数据更新了，但右侧box3_right.js区域被挤变形，或者全屏时文字缩成一团 - 根本原因：没用
vh/vmax单位重写字体和 padding，还在用px或固定rem - 性能影响：Bootstrap 的
container-fluid+row嵌套过深（>4 层）会导致 Vue/React 渲染卡顿，尤其在低配 Windows 主机投屏时
怎么让 Bootstrap 容器适配直播大屏分辨率？
关键不是“用 Bootstrap”，而是“怎么用”。直播大屏常见 16:9 分辨率（如 1920×1080、3840×2160），必须放弃固定像素思维。
- 所有宽度、高度、
font-size、padding必须用vh、vmax或calc()，例如：font-size: calc(1.2vmax);而不是font-size: 24px; - 禁用 Bootstrap 默认的
container（它带固定 max-width），改用container-fluid+ 自定义.grid-container { width: 100vw; height: 100vh; } - 避免
col-*堆叠：直播场景下屏幕不会旋转，直接写死col-lg-3 col-xl-3，删掉col-md-和col-sm-类，减少响应式计算开销 - 背景图必须用
background-size: cover+background-position: center，否则投屏拉伸后人物变形
如何把实时数据喂进 Bootstrap 布局里的 ECharts？
Bootstrap 只提供 这种空盒子，填充内容靠 JS。重点在于“谁触发更新”和“更新哪一块”。
- 不要全局重绘：
myChart.setOption(option)之前，先判断新数据是否真有变化（比如newData.gmv !== lastGmv），避免无谓渲染 - 模块化绑定：每个
boxX.js文件只负责一个div（如lo_2），初始化时传入对应 DOM 元素：initChart(document.getElementById('lo_2')) - WebSocket 接收后，按数据类型分发：收到
{ "type": "sales", "data": [...] }就只调box1.update()，别让box4也跟着跑一遍逻辑 - 轮询 fallback 要设节流：
setInterval(() => fetch('/api/sales').then(render), 5000)，但首次加载完立刻执行一次，避免白屏 5 秒
容易被忽略的部署细节
本地 index.html 双击能跑，不等于投屏能用。直播环境里最常崩在路径和跨域上。
-
bootstrap.css和echarts.min.js必须本地加载（不要 CDN），否则断网或防火墙拦截后整个大屏空白 - WebSocket 地址不能写
ws://localhost:3000，要换成实际服务器 IP 或域名，且后端Socket.io必须配置cors: { origin: '*' } - Chrome 浏览器全屏（F11）后，若页面被缩放（右键检查发现
html元素transform: scale(0.8)），说明 viewport 设置错了，需加： - Windows 主机投屏时，360/Edge 可能禁用
WebSocket，必须用 Chrome，并确认地址栏显示https://或http://（非file://）
