Bootstrap无现成团队页组件，需用card+grid+container构建；禁用已废弃的card-deck，改用row+col布局实现响应式列数；头像统一正方形裁剪、加alt属性及onerror SVG回退；职位用small.text-muted单独行；长文本慎用text-truncate，优先精简文案至20字内。
Bootstrap 本身不提供“团队介绍页面”这个现成组件，但用它的 card、grid 和 container 就能快速搭出响应式、语义清晰的团队页——关键不是套模板，而是控制好层级、留白和移动端折叠逻辑。
用 card 做成员卡片，别直接套 card-deck
card-deck 在 Bootstrap 5 中已被废弃，且它强制等高、无间距控制，实际排版容易发僵。推荐用 row + col 手动布局：
- 每个成员用一个
div class="col-md-4 col-sm-6 col-12"包裹card，确保在小屏单列、中屏双列、大屏三列 -
card-img-top放头像，记得加alt属性；头像尺寸统一裁剪为正方形（如 300×300），避免拉伸变形 - 职位信息别塞进
card-title，用small.text-muted单独一行，语义更准、样式更可控
头像加载失败时，用 onerror 回退到 initials
团队页最常遇到头像 404，纯 CSS fallback 不可靠，得靠 JS 补位：
<img src="team/jane.jpg"
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48YmFja2dyb3VuZCBmaWxsPSIjZjFmMWYxIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjQwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSIjNzQ3NDc0Ij5KQTwvdGV4dD48L3N2Zz4='"
class="card-img-top">
这段 base64 是 SVG 格式的 “JA” 字母图，背景灰白、文字深灰，适配浅色主题；若团队用深色主题，需同步改 fill 和背景色。
职位描述过长？用 text-truncate 要谨慎
text-truncate 只对单行生效，且依赖 display: inline-block 或 block + 宽度限制。团队页里常见问题是职位写成 “高级前端工程师兼前端架构组负责人兼技术布道师”，直接截断成 “高级前端工程师兼前端架构组负责…” 很难看。
- 优先控制文案长度，职位字段建议 ≤ 20 字
- 真要多行截断，用 CSS
display: -webkit-box+-webkit-line-clamp: 2，但注意 Safari 16.4+ 才稳定支持 - 别给
card-body设固定高度，否则在 iOS Safari 上可能触发滚动或溢出隐藏失效
真正卡住进度的往往不是怎么画卡片，而是头像路径管理、职位字段长度校验、以及小屏下按钮（比如“查看全部”）要不要显示——这些细节没对齐产品需求，再漂亮的 Bootstrap 样式也撑不起一页可用的团队介绍。
