Shock v1.0.4 - Bootstrap HTML Template

# 项目简介 Shock 是由 Codings 出品的一套基于 Bootstrap 5 的创意多用途 HTML 模板，包含首页、博客页、元素组件页、页眉页脚等多种预制页面，适合快速搭建现代商务、作品集或资讯类网站。模板内置丰富交互效果，支持高度定制。 ## 技术栈 - Bootstrap 5 - jQuery - Font Awesome 6 - Swiper（轮播） - AOS（滚动动画库） - Lightbox（图片灯箱） - CSS Variables（主题色系统） ## 项目结构 ``` shockhtml-104/HTML Template/ ├── assets/ │ ├── css/ │ │ ├── theme.css # 主题色变量、字体定义 │ │ ├── core.css # 核心布局样式 │ │ └── main.css # 组件样式 │ ├── js/ │ │ └── main.js # 预加载器、弹窗、侧边挂件、轮播等交互 │ └── images/ # 占位图（需替换） ├── home-*.html # 首页模板 ├── blog-*.html # 博客列表页 ├── blog-post-*.html # 博客详情页 ├── header-*.html # 页眉模板 ├── footer-*.html # 页脚模板 └── element-*.html # 元素组件展示页 ``` ## 核心文件说明 - `assets/css/theme.css` — 定义主色系（青绿 #07beb8、紫 #6917d0、粉 #ff1791）及 Lato / Proxima Nova 字体 - `assets/css/main.css` — 包含按钮、卡片、表单、侧边挂件、弹窗等所有组件样式 - `assets/js/main.js` — 实现预加载器、PopupBar、PopupBox、侧边挂件显隐、图标初始化等 19 项交互功能 - `header-grid-*.html` — 网格布局导航页，提供全屏菜单、搜索表单等不同头部方案 - `element-*.html` — 60+ 组件独立演示页面，可直接复制使用 ## 快速开始 纯静态模板，直接在浏览器打开 `home-1.html` 即可预览完整效果。无需安装依赖或构建。 ## 使用建议 模板为独立 HTML 文件，复制 `HTML Template` 目录至服务器即可使用。建议将 assets/images 中的占位图替换为真实素材，并参考 element-*.html 页面挑选组合所需组件。