Bootstrap 企业官网案例

该项目是一个基于 Bootstrap 5 构建的企业官网，主要面向企业展示、服务推广和客户联系等业务场景，面向有网站开发、设计及技术支持需求的企业或个人客户，提供响应式网站开发、移动适配、安全维护等技术解决方案
导航功能：响应式导航栏，在移动端会折叠为汉堡按钮，点击可展开导航菜单，包含首页、服务、团队、联系我们等导航项，点击可平滑滚动到对应区域。
轮播展示：Hero 区域的轮播图，展示企业核心业务和优势，包含 3 张轮播图片及对应的标题、描述和操作按钮，支持自动轮播和手动切换（前后按钮、指示器）。
服务展示：以卡片布局形式展示企业提供的服务，包括网站开发、移动适配、安全维护，每张卡片有图标、标题、描述和了解更多按钮，鼠标悬停时有上浮效果。
团队展示：展示企业专业团队成员，包括头像、姓名、职位、简介及社交账号链接，卡片同样有悬停上浮效果。
联系表单：提供联系表单，包含姓名、电话、邮箱、留言内容等输入项，支持表单提交，方便客户反馈需求或问题。
页脚信息：包含关于我们、联系方式、关注我们等板块，展示企业简介、联系电话、邮箱、地址及社交媒体链接，还有版权信息。

1.技术选型：使用 HTML 作为基础结构，结合 Bootstrap 5 框架实现响应式布局和组件样式，引入 Font Awesome 提供图标支持，通过自定义 CSS 优化样式细节，使用 JavaScript 实现平滑滚动功能。
2.响应式设计：利用 Bootstrap 的栅格系统（如col-md-4、col-sm-6等类）实现不同屏幕尺寸下的布局适配，导航栏在移动端自动折叠，轮播图、服务卡片、团队卡片等元素在不同设备上有合适的排列方式。
3.组件应用：使用 Bootstrap 的导航栏（navbar）、轮播图（carousel）、卡片（card）、表单（form）、按钮（btn）等组件快速搭建页面结构，减少自定义代码量。
交互效果：通过自定义 CSS 的transition属性实现卡片悬停时的上浮效果，使用 JavaScript 监听导航锚点点击事件，实现平滑滚动到对应区域的功能。
资源引入：通过 CDN 方式引入 Bootstrap 5 的 CSS 和 JS 文件（含 Popper）以及 Font Awesome 图标库，无需本地存放资源，简化项目结构。