HTML后台

neostrap-core — HTML 后台模板

作者 kodinusgroup

neostrap-core 是一个采用 NeoBrutalism 视觉风格的 Bootstrap 5 后台界面模板，基于 Vite 与 TypeScript 构建，包含 SCSS 主题变量、组件样式与多页面示例。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

作者提供的预览

访问演示网站在新标签页打开

作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

以 Bootstrap 5 为基础，叠加 NeoBrutalism 风格的组件样式

SCSS 按组件拆分，含亮色与暗色变量文件，便于主题定制

使用 Vite 与 TypeScript，提供热更新与生产构建脚本

内置 index、404、500、503 及组件文档等多个 HTML 页面

包含 i18n 与主题切换的初始化脚本

附带多尺寸 favicon、apple-touch-icon 与 mstile 图标

模板详细介绍

neostrap-core 是 kodinusgroup 在 GitHub 上开源的 HTML 后台模板，定位为数据界面/后台类型，视觉风格为 NeoBrutalism（粗描边、高对比、硬阴影）。模板以 Bootstrap 5 为基础，在 src/assets/scss/neobrutalism 目录下按组件拆分样式文件，覆盖 alert、button、card、dropdown、input、navbar 等，并提供 _variables.scss 与 _variables-dark.scss 用于主题定制。

工程侧使用 Vite 与 TypeScript，入口脚本包括 init-i18n.ts、init-theme.ts 与 neostrap.ts，分别处理国际化初始化、主题切换与主逻辑；页面层包含 index.html、404.html、500.html、503-cs.html 以及 docs-component-index.html，布局由 layouts/single.html 与 partials 下的 favicon、font、footer、navbar 片段组成。静态资源目录提供多尺寸 favicon、apple-touch-icon 与 mstile 图标。

README 列出 Vite + TypeScript、Bootstrap 5 集成、SCSS/SASS 支持、NeoBrutalism 组件样式、热更新与生产构建等特性，并给出 npm/yarn/pnpm/bun 的安装与 dev、build 命令。仓库采用 MIT 许可，可免费使用、修改、商用与分发该版本代码，但演示图片、字体、图标等第三方素材需单独核对许可。

HTML后台

适合你的项目吗？

适用场景

搭建具有粗描边、高对比视觉风格的后台管理界面
在 Bootstrap 5 项目中引入 NeoBrutalism 组件样式进行二次开发
作为多页面 HTML 后台原型的起点，复用其布局与导航片段
需要亮色/暗色主题切换与国际化初始化的界面项目

适合人群

熟悉 Bootstrap 与 SCSS 的前端开发者
需要后台/数据界面模板的 HTML 项目
希望以 MIT 许可自由修改与分发的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后使用 npm、yarn、pnpm 或 bun 安装依赖
2
通过 npm run dev 等对应命令启动开发服务器
3
使用 npm run build 生成生产构建
4
主要编辑 src/ 目录下的文件，Bootstrap 组件可直接使用
5
第三方图片、字体与图标素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/kodinusgroup/neostrap-core/blob/main/LICENSE https://github.com/kodinusgroup/neostrap-core/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 81 / 100
技术栈: HTML
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2025-05-26
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 1c08f5da5b45b1869ae485695e51de0d351ad1a298ce5a3ccbeb352eb77285f5

2026-10-02T18:35:28.294Z

来源文件 / 仓库

[![ReadMeSupportPalestine](https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-project.svg)](https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md)

<div align="center" style="margin-bottom: 1rem">
  <a href="./README.md"><strong>English</strong></a>
  <span style="margin-left: .5rem;margin-right: .5rem">•</span>
  <a href="./README-id.md">Indonesian</a>
</div>

<h1 align="center">NeoStrap Template</h1>

![Screenshot](./screenshot.png)

<p align="center">The latest Bootstrap 5 template with a NeoBRUTALISM style that is simple, bold, and fierce!</p>

<div align="center">

  [![All Contributors](https://img.shields.io/github/contributors/kokodingin/neostrap-core)](https://github.com/kokodingin/neostrap-core/graphs/contributors)
  ![GitHub last commit](https://img.shields.io/github/last-commit/kokodingin/neostrap-core.svg)
  ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/kokodingin/neostrap-core)
  [![License](https://img.shields.io/github/license/kokodingin/neostrap-core.svg)](LICENSE)
  
  <hr />

  <p>This project is supported and sponsored by:</p>

  <div style="text-align: center">
    <a href="https://www.facebook.com/groups/programmerhandal/">
      <img src="./logo-sponsor-imphnen-xxxhdpi.png" height="100px" />
    </a>
  </div>

  <p align="center">
    <a href="http://neostrap.kokodingin.id">Demo Page</a>
    <span style="margin-left: .5rem;margin-right: .5rem">•</span>
    <a href="./CONTRIBUTE.md">READ THE CONTRIBUTION GUIDE!</a>
    <span style="margin-left: .5rem;margin-right: .5rem">•</span>
    <a href="./LICENSE">LICENSE</a>
  </p>
</div>

## ⚡ Quick Start

1. Download or clone the repository
```bash
git clone https://github.com/kokodingin/neostrap-core.git
```

2. Install dependencies
```bash
npm install
yarn install
pnpm install
bun install
```

3. Run the development server
```bash
npm run dev
yarn dev
pnpm run dev
bun run dev
```

### 📁 Folder Structure
```
neostrap/
|   .editorconfig
|   .env
|   .gitignore
|   .prettierignore
|   .prettierrc
|   .tsconfig.json
|   LICENSE
|   logo-sponsor-imphnen-xxxhdpi.png
|   package.json
|   README.md
|   screenshot.png
|   vite.config.ts
|
+---.vscode
|       launch.json
|
+---src
|   |   404.html
|   |   500.html
|   |   503-cs.html
|   |   docs-component-index.html
|   |   index.html
|   |
|   +---assets
|   |   +---js
|   |   |       init-i18n.ts
|   |   |       init-theme.ts
|   |   |       neostrap.ts
|   |   |
|   |   +---scss
|   |   |   |   bootstrap.scss
|   |   |   |   neostrap.scss
|   |   |   |   _variables-dark.scss
|   |   |   |   _variables.scss
|   |   |   |
|   |   |   \---neobrutalism
|   |   |           core.scss
|   |   |           _alert.scss
|   |   |           _brutal-design.scss
|   |   |           _button.scss
|   |   |           _card.scss
|   |   |           _dropdown.scss
|   |   |           _input.scss
|   |   |           _navbar.scss
|   |   |           _root.scss
|   |   |
|   |   \---static
|   |       |   apple-touch-icon-114x114.png
|   |       |   apple-touch-icon-120x120.png
|   |       |   apple-touch-icon-144x144.png
|   |       |   apple-touch-icon-152x152.png
|   |       |   apple-touch-icon-57x57.png
|   |       |   apple-touch-icon-60x60.png
|   |       |   apple-touch-icon-72x72.png
|   |       |   apple-touch-icon-76x76.png
|   |       |   favicon-128.png
|   |       |   favicon-16x16.png
|   |       |   favicon-196x196.png
|   |       |   favicon-32x32.png
|   |       |   favicon-96x96.png
|   |       |   favicon.ico
|   |       |   mstile-144x144.png
|   |       |   mstile-150x150.png
|   |       |   mstile-310x150.png
|   |       |   mstile-310x310.png
|   |       |   mstile-70x70.png
|   |       |
|   |       +---images
|   |       |
|   |       \---js
|   |               all.js
|   |
|   \---layouts
|       |   single.html
|       |
|       \---partials
|           |   favicon.html
|           |   font.html
|           |
|           +---footer
|           |       single.html
|           |
|           \---navbars
|                   primary.html
|
\---types
    \---vite-env.d.ts
```

## 📁 Included Features
- ✅ Vite + TypeScript setup
- ✅ Integrated Bootstrap 5
- ✅ SCSS/SASS support
- ✅ NeoBrutalism components & styles
- ✅ Hot reload
- ✅ Production-ready builds

## 📦 Production Build
```bash
npm run build
```

## 💻 Development
Start editing files in the `src/` folder according to your needs. All Bootstrap components are available and ready for use.

反馈内容错误