Bootstrap不提供现成企业门户首页模板，需用container/row/col构建响应式骨架，配合navbar、carousel、card等组件定制；须自定义CSS覆盖品牌色/字体，用loading="lazy"和srcset优化图片性能，并手动补全SEO与可访问性属性。
Bootstrap 本身不提供“企业门户首页”这种现成模板，你得自己组合组件、写结构、调样式——但它的栅格、导航、卡片、轮播等基础能力足够支撑一个专业首页，关键在怎么组织和定制。
用 container 和 row/col 搭建响应式骨架
别一上来就堆内容。先用 container 包住整个页面（或 container-fluid 全宽），再用 row + col-* 划分区域：顶部导航、轮播图、服务模块、客户案例、底部。注意 col-md-4 这类类名中的数字代表在中屏及以上占几列，小屏自动堆叠——这是响应式的底层逻辑。
常见错误：直接写 col-6 却没配对 row，导致 margin 失控；或嵌套 row 时忘了外层 col 已经带 padding，造成额外空白。
- 顶部导航栏用
navbar组件，加fixed-top实现吸顶 - 轮播图用
carousel，但默认动画慢且无缩略图，建议加data-interval="5000"控制时长 - 服务模块每项用
card，标题用card-title，图标建议用 SVG 或 Font Awesome，别用 Bootstrap 自带的旧版 glyphicons
避免直接改 bootstrap.css，用自定义 CSS 覆盖
企业首页通常要品牌色（比如主色不是蓝色）、字体（比如用思源黑体）、间距微调。别碰原始 CSS 文件——它会被 npm 更新覆盖。创建自己的 custom.css，在 Bootstrap 后引入，用更具体的 selector 覆盖，例如：
.navbar-brand {
color: #0056b3 !important;
}
.feature-card:hover {
transform: translateY(-4px);
}
注意：Bootstrap 5 已移除 jQuery 依赖，所有 JS 组件（如 collapse、modal）需通过原生 JS 初始化。如果用了 data-bs-toggle="collapse"，确保没漏掉 data-bs-target 或 ID 不匹配。
图片和轮播加载慢？优先用 loading="lazy" 和 srcset
首页首屏图片（尤其是轮播大图）直接影响 Lighthouse 评分。Bootstrap 不管这个，得你自己加：
- 所有
<img alt="怎么用Bootstrap制作企业门户网站首页" >加loading="lazy"属性（现代浏览器原生支持） - 轮播图用
srcset提供多尺寸：<img src="hero-sm.jpg" srcset="hero-sm.jpg 576w, hero-md.jpg 992w, hero-lg.jpg 1200w" alt="怎么用Bootstrap制作企业门户网站首页" > - 避免把未压缩的 PNG 直接扔进
carousel-item，用sharp或在线工具压到 WebP 格式
性能差的典型表现：移动端打开首页卡顿、LCP（最大内容绘制）超 4s。这些问题跟 Bootstrap 无关，但容易误以为是框架问题。
SEO 和可访问性不能靠 Bootstrap 自动补全
Bootstrap 的 navbar 默认没加 aria-label，carousel 缺少焦点管理，card 里文字若没包裹在语义化标签（如 <h3></h3>）中，搜索引擎和读屏软件很难理解层级。
必须手动补：
- 导航栏加
aria-label="主导航" - 轮播加
role="region" aria-roledescription="轮播图" tabindex="0"，每张图加aria-hidden="true/false" - 所有图标旁加
<span class="visually-hidden">服务介绍</span>（Bootstrap 5 内置该 class）
最常被忽略的是 lang 属性和 <title></title> 动态化——首页 <title></title> 写死 “首页 | XX公司” 就行，但别漏掉 。
