Bootstrap本身不提供星空或流星背景特效，需借助tsParticles等JS库或手写Canvas动画实现，其仅负责布局与响应式基础。
Bootstrap 本身不提供星空或流星背景特效——它没有内置的粒子动画、Canvas 渲染或 CSS 星空动画组件。想用 Bootstrap 实现这种效果，必须额外引入 JavaScript 动画库（如 particles.js 或 tsParticles）或手写 Canvas/HTML+CSS 动画，Bootstrap 只负责布局容器和响应式基础。
为什么不能只靠 Bootstrap class 实现流星效果
Bootstrap 的 .bg-dark、.position-fixed 或 z-index 工具类只能帮你“罩住”背景层，但无法生成动态星星、轨迹、拖尾或随机运动。所谓“Bootstrap 星空背景”，实际是：Bootstrap 做结构 + 外部动画脚本做渲染。
-
bootstrap.min.css可设全屏容器、遮盖内容、控制层级，但无任何动画逻辑 - 所有“流星”行为（位置、速度、透明度衰减、碰撞检测）必须由 JS 控制
- 直接在 Bootstrap 的
<div class="container"> 里加 <code><canvas></canvas>是常见做法，但 canvas 初始化和动画循环与 Bootstrap 无关用 tsParticles 快速接入星空+流星（推荐方案）
tsParticles是particles.js的现代替代，支持流星（"line" 或 "trail" 模式）、鼠标交互、暗色主题适配，且能与 Bootstrap 容器自然共存。- 在
引入 CDN：<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.2.0/tsparticles.min.js"></script>
- 在 Bootstrap 页面底部（如
末尾）加一个全屏<div id="tsparticles">，并用 Bootstrap class 固定层级：<pre class="brush:php;toolbar:false;"><div id="tsparticles" class="position-fixed top-0 start-0 w-100 h-100 z-n1"></div></pre><li>初始化时禁用默认粒子，启用流星（<code>move.trail.enable: true），并设背景为深蓝/黑：tsParticles.load("tsparticles", { background: { color: "#000514" }, particles: { move: { trail: { enable: true, length: 10 } } } }); - 注意：
z-n1是 Bootstrap 5.3+ 的负 z-index 工具类；若用旧版，需自定义style="z-index: -1;" - HTML 中放一个
<canvas id="starfield" class="position-fixed top-0 start-0 w-100 h-100"></canvas>，同样用 Bootstrap 定位 - JS 里用
requestAnimationFrame循环更新：ctx.clearRect(0, 0, width, height)清屏后重绘每颗星 - 关键参数：流星长度用
lineTo(x + vx * 30, y + vy * 30)拉出拖尾；透明度随帧数递减，到 0 时重置坐标 - 性能提示：流星数量建议 ≤ 30 条，否则低端设备掉帧；避免在
resize事件中频繁重置 canvas 尺寸（应节流）
手写轻量 Canvas 流星（避开第三方依赖）
如果项目不允许外链 JS，可用约 80 行原生 Canvas 实现基础流星：随机生成带速度向量的光点，沿斜线移动并渐隐。
真正难的不是“怎么动”，而是怎么让流星不穿帮——比如从屏幕外飞入时起点坐标的随机性、与 Bootstrap 导航栏/卡片的 z-index 层叠顺序、移动端 touch 事件是否误触发 canvas 捕获。这些细节比动画逻辑更消耗调试时间。
- 在
