基于 Bootstrap 4 与 Reactstrap 构建，组件风格统一
React作品集
code-301-react-portfolio-template — React 作品集模板
作者 applena
基于Bootstrap 4与React的组件库，含100+组件与示例页面，适合快速搭建作品集。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。
目前有 1 张原始预览，可打开完整图片查看设计细节。
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-09-06查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
包含 100 多个可复用组件，覆盖常见 UI 元素
提供登录、注册、落地页、个人资料页等示例页面
支持通过 SASS 自定义颜色与样式
官方文档与演示站点齐全，便于查阅
模板详细介绍
code-301-react-portfolio-template 实际对应的是 Argon Design System React，一套基于 Bootstrap 4、React 和 Reactstrap 的开源设计系统。它并不只是一个作品集页面，而是提供了超过 100 个独立组件，覆盖按钮、输入框、导航栏、模态框、轮播、日期选择器等常见 UI 元素，并包含登录、注册、落地页和个人资料页等预置示例。其核心价值在于让开发者从原型到功能页面的过渡更顺畅，所有组件都支持通过 SASS 文件调整颜色与样式。
对于需要快速搭建作品集或营销页面的 React 开发者，这个模板能节省大量 UI 编写时间。它自带多种页面结构，可以直接参考或修改，同时每个组件都有多种状态（如悬停、聚焦、颜色变化），方便定制。不过，项目本身定位是设计系统，而非专门的作品集模板，因此内容布局需要自行调整。
需要注意的是，该仓库的 star 数较少，且原描述提到功能范围与素材条款待复核，实际使用前建议检查其许可证（MIT）是否覆盖所有资源，并确认示例页面中的图片、图标是否可商用。另外，README 中未明确说明是否已接入真实后端，登录、注册等页面应视为前端演示。
React作品集
适合你的项目吗？
适用场景
- 快速搭建个人作品集或产品展示页
- 作为 React 项目的 UI 基础组件库
- 学习 Bootstrap 4 与 React 结合的最佳实践
适合人群
- React 开发者
- 需要快速原型设计的团队
- 偏好 Bootstrap 风格 UI 的项目
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
使用 npm i argon-design-system-react 安装，或克隆仓库后运行 npm install。
- 2
建议先查看官方文档了解组件用法。
- 3
注意检查资源许可证，尤其是图片与图标。
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明MIT许可证明确允许免费使用、复制、修改、合并、发布、分发、再许可和销售，仅需保留版权与许可声明。
使用时需要遵守
- 保留原作者版权声明和 MIT 许可证声明。
- 保留版权声明和许可声明于所有副本或实质性部分
额外费用与待核对事项
- README中引用的font-awesome、nucleo等第三方字体图标素材授权未确认
查看原文依据
Permission is hereby granted, free of charge, to any person obtaining a copy
许可证原文
The above copyright notice and this permission notice shall be included in all
许可证原文
https://github.com/applena/code-301-react-portfolio-template/blob/main/LICENSEhttps://github.com/applena/code-301-react-portfolio-template/blob/HEAD/README.mdPermission is hereby granted, free of char
许可证原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-09-24。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较少 · 50 / 100
- 技术栈
- React
- 网站类型
- 作品集
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2021-04-02
- 截图检查日期
- 2026-09-06
目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。
目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
当前版本没有可核对的编辑审核记录；旧的应用时间不代表已完成事实审核。
这条历史介绍未保存固定版本的来源快照。请对照当前仓库，发现不一致可反馈。
反馈内容错误看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
react-portfolio-template
React powered portfolio website template for developers
React · 作品集
personal-website-react
personal-website-react 是一个面向开发者的个人作品集单页模板，由 React 和 Material-UI 构建，并通过 Create React App 初始化。
React · 作品集
karngyan.com
karngyan.com 是一个面向开发者的个人网站与博客模板，作者用它搭建了自己的站点，并公开了完整代码。 模板的核心定位很明确：让写作者专注于内容，而不是花时间搭建基础设施。
React · 作品集
react-portfolio-template
react-portfolio-template 是一个由 Ryan Balieiro 开发的 React 作品集模板，定位为“sleek, futuristic”，适合开发者展示个人履历。
React · 作品集
portfolio
Personal website, Data scientist portfolio template
React · 作品集
react-portfolio
react-portfolio 是一个面向开发者的个人作品集模板，基于 React 16 和 Create React App 构建，界面样式采用 Material-UI。
React · 作品集