💡 简介 ​

bootstrap-admin是基于bootstrap(5.1.3+)设计的一个响应式纯静态通用后台管理HTML模板,它可以适用于任何后端语言,任何项目的后台管理、只要你有bootstrap的一点点基础就可以轻松上手。旨在让喜欢用bootstrap开发后台管理系统的程序员有个愉悦的起点。

🗺️ 背景 ​

简单交代一下背景，现在都是全面在拥抱前端框架(国内vue),但是开发一个小系统的后台管理的时候,原本一个后端人员可以用各自后端语言的模板引擎去渲染(curd)就完事了，现在为了跟上现代化，连一个很小的后台管理都要用vue,那么你的开发成本又增加了,你需要先学会vue的基本语法还有vue全家桶(vue-cli、vue-router、vuex)、以及一套前端的ui库吧,比如element ui、element plus(vue3),同时前端现在更新换代特别快

• vue-cli->vite
• vuex->pinia
• vue2->vue3(typescript)

我想这是部分后端人员不愿意面对的,或者说内心是有一点点抵触的，同时我看了一下国内很多后台管理系统都喜欢那种IFrame+多Tab的模式,但是样式却比较古老, 国外开源的后台模板样式虽然好看，但是都是点击刷新一整个页面的，因此在两者之间bootstrap-admin找到了一个平衡点。

这里作者的意思并不是说不学前端那一套了,还是鼓励让更多的偏向后端的程序员去多接触一些东西，跟上时代的脚步，bootstrap-admin只是传统开发后台方式的视图层的一个解决方案。

✨ 特性 ​

• 高度响应式、一站匹配手机、平板、pc
• 界面整体简约、大气、流畅不卡顿
• 集成开发中常用的优秀的开源js插件
• 严格区分bootstrap-admin和bootstrap的样式,bootstrap-admin的样式都是以bsa开头
• 没有修改bootstrap底层样式,体验原汁原味的bootstrap
• 紧跟bootstrap官方的更新步伐

⭐ 关于IFrame+多Tab效果 ​

bootstrap-admin的iframe+多tab效果的驱动来源于bootstrap-admin的官方出品的bootstrap-quicktab, 一个iframe多tab的后台管理系统要想体验好，tab插件的设计要足够强大才行，如果和tab有关的任何优化和建议,可以去bootstrap-quicktab仓库提交issues,顺便求一波star

💬 交流 ​

• Q群1:284169647
• Q群2:719667795

🌱 版本对应 ​

📁 目录结构 ​

开发您的项目时,只需要保留dist、lib、pages目录以及入口HTML文件index.html即可

├─build               构建目录
├─dist                生产文件目录
│  ├─css                 生产css目录
│  ├─img                 生产img目录
│  └─js                  生产js目录
├─docs                文档目录
├─lib                 外部依赖目录
├─pages               示例页面目录
├─.babelrc.js         Babel 插件、预设、转换配置文件
├─.browserslistrc     共用目标浏览器配置文件
├─.stylelintrc.json   stylelint配置文件
├─.eslintrc.js        eslint配置文件
├─composer.json       composer 定义文件
├─gulpfile.mjs        gulpfile打包配置文件
├─rollup.config.js    rollup打包配置文件
├─index.html          主页面(入口文件)
├─404.html            404页面(静态文件托管平台所需页面,无视即可)
├─LICENSE.txt         授权说明文件
├─package.json        npm 定义文件
├─README.md           README 文件
├─...
├─...

🚩 本地开发调试运行 ​

如果你需要为bootstrap-admin贡献代码,或是你发现了一些问题需要重新编译dist文件， 您需要 Node.js/npm，然后克隆/下载 repo：

• npm ci
• npm run build(编译css/js文件、以及压缩img文件)
• npm run serve(默认开启一个服务可以访问页面,端口默认9999)

一些别的指令的解释:

• npm run css(单独编译scss文件)
• npm run js(单独编译js文件)
• npm run css-fix(在可能的情况下自动修复规则报告的问题)

更多开发指令请查看gulpfile.mjs文件

💖 捐赠 ​

开源不易,如果你觉得此项目的发展日后可以用上,或此时对你已有帮助,请支持我,让我继续前行