使用 navbar-light 加自定义渐变背景与透明/半透逻辑，清除默认边框阴影、滚动时添加浅灰底与微阴影、采用苹果字体族及轻量宽松排版、左对齐 logo、悬停仅微调 opacity 并加平滑过渡，兼顾 backdrop-filter 兼容性降级。
直接用 navbar-light + 自定义背景渐变 + 透明/半透逻辑，就能逼近苹果官网那种干净、留白足、悬停有呼吸感的效果。Bootstrap 默认的 navbar 类只是骨架，关键在覆盖默认边框、阴影、字体和 hover 行为。
去掉默认边框和阴影，让导航栏真正「悬浮」
苹果官网导航栏在页面滚动前是完全透明的，滚动后才出现浅灰底和微阴影。Bootstrap 的 navbar 默认带 border-bottom 和 box-shadow，必须手动清掉：
- 在 CSS 中重置：
.navbar { border: none; box-shadow: none; } - 如果用了
navbar-expand-lg，记得同时清除.navbar-collapse的 padding-top，否则小屏菜单展开时顶部会多出空白 - 滚动后加背景，别用 JS 频繁操作
style，推荐用scroll事件切换 class（如scrolled），再用 CSS 过渡：.navbar.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); }
字体和间距要「苹果化」：无衬线、轻量、宽松
苹果用的是 San Francisco 字体族，网页中可用 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;。重点不是字体本身，而是字号、字重和行高配合：
-
.navbar-nav .nav-link建议设为font-weight: 400（不是 Bootstrap 默认的 500），letter-spacing: 0.5px - 导航项之间用
margin-left: 1.5rem替代默认的margin-right，更符合从左到右阅读流 - 小屏折叠按钮（
.navbar-toggler）去掉border，用color: #000+opacity: 0.8，避免突兀
Logo 和品牌名不能居中，必须左对齐且留足左侧呼吸感
苹果官网的 logo 始终靠左，且离左边缘距离固定（约 2rem），右侧留给导航项和 CTA 按钮。Bootstrap 的 .navbar-brand 默认有 padding，容易破坏节奏：
- 清除
.navbar-brand的左右 padding：padding-left: 0; padding-right: 0; - 用
margin-right: auto推开右侧导航，而不是依赖ml-auto—— 后者在某些断点下会失效 - 如果品牌名是文字而非图片，建议用
font-size: 1.25rem+font-weight: 600，但不要加粗过度，保持克制
悬停动画要「慢一点、淡一点」
苹果官网的链接 hover 是极轻微的 opacity 变化（0.7 → 1.0），不是颜色跳变或下划线。Bootstrap 默认的 :hover 会改 color，必须覆盖：
- 禁用所有
.nav-link:hover的 color 变化，只保留opacity: 0.85（未 hover）→opacity: 1（hover） - 过渡用
transition: opacity 0.25s ease-in-out，别用all，否则字体渲染会闪烁 - 小屏菜单展开时，
.navbar-collapse内容要加animation: slideDown 0.3s ease-out forwards，但动画起点必须是transform: scaleY(0)+origin: top，否则会抖动
最易被忽略的是 backdrop-filter 的兼容性：iOS Safari 15.4+ 和 Chrome 102+ 支持良好，但旧版 Android WebView 几乎不支持。如果目标用户含大量低端安卓机，得准备降级方案——比如用纯 white 背景 + 低 opacity 阴影替代毛玻璃效果。
