Labout – Lab & Research HTML Template

# 项目简介 Labout 是一套基于 Bootstrap 的响应式 HTML 5 企业展示模板，适用于实验室、科研机构或服务型公司的官网建设。模板包含首页、关于、博客、服务、团队、活动、联系等多个页面，并提供 RTL/LTR 双语言模式切换和主题色切换功能。 ## 技术栈 - Bootstrap 5.2.0（响应式布局框架） - jQuery（DOM 操作与交互） - Font Awesome（图标库） - Nice Select、Owl Carousel 等插件 - Google Fonts（Afacad、Inter 字体） - PHP（sendemail.php 提供联系表单邮件发送） ## 项目结构 ``` labouthtml-10/Labout Pack/ ├── Doc/ # 模板文档目录 │ ├── index.html # 文档入口页 │ ├── css/ │ │ ├── bootstrap.css │ │ ├── font-awesome.css │ │ ├── scrollbar.css │ │ └── style.css │ ├── fonts/ │ └── images/ │ ├── logo.png │ └── mail-setting.png │ └── map-setting.png │ └── js/ │ ├── bootstrap.min.js │ ├── jquery.js │ ├── jquery.nav.js │ ├── jquery.scrollTo.js │ ├── respond.js │ ├── script.js │ └── scrollbar.js └── Labout/ # 模板实际文件 ├── index.html # 首页 ├── about.html, blog*.html, contact.html... ├── sendemail.php # 联系表单后端 └── assets/ ├── css/ ├── images/ └── js/ ``` ## 核心文件说明 - `Labout/index.html` — 模板首页入口，包含导航、轮播、服务展示等模块 - `Labout/sendemail.php` — 联系表单提交后的邮件发送逻辑（需配置邮箱） - `Labout/assets/css/style.css` — 主样式文件，定义全局配色与布局 - `Labout/assets/css/module-css/` — 按功能模块拆分的样式（如 banner、service、team） - `Doc/index.html` — 模板使用文档，说明 HTML 结构、CSS 组织、JS 功能等 - `Doc/css/style.css` — 文档页面自身的样式 ## 快速开始 1. 进入 `labouthtml-10/Labout Pack/Labout/` 目录 2. 直接在浏览器打开 `index.html` 即可预览完整效果 3. 如需使用联系表单，将 `sendemail.php` 部署至 PHP 环境，并修改文件中的 `RECIPIENT_EMAIL` 为目标邮箱 ## 使用建议 - 正式项目请将 `sendemail.php` 部署至支持 PHP 的服务器，并注意防止垃圾邮件注入 - 模板已内置多套主题色（通过右上角切换器切换），可根据品牌需求修改 `assets/css/color/theme-color.css` 中的色值