Bootstrap 5 管理系统模板

7种布局 × 3种主题 = 21种不同体验

7种布局

默认侧边栏、折叠布局、水平导航、盒装布局、分离布局、覆盖侧边栏、图标菜单

3种主题

浅色模式、深色模式、RTL支持,支持从右到左的阅读方向

SCSS管理

仅需修改几行SCSS代码即可切换布局和主题,完全可控

布局展示

默认布局
默认布局

经典的管理面板布局

查看
折叠布局
折叠布局

可折叠的侧边栏

查看
水平布局
水平布局

顶部主导航菜单

查看
盒装布局
盒装布局

受限宽度的容器

查看
分离布局
分离布局

分离的顶部和侧边栏

查看
覆盖布局
覆盖布局

侧边栏覆盖内容

查看
图标菜单
图标菜单

紧凑的图标导航

查看

使用方法

安装依赖
npm install
编译SCSS
# 开发模式(监听文件变化)
npm run watch

# 生产模式(一次性编译)
npm run build
切换主题
// 在 scss/_variables.scss 中修改
$theme-mode: 'dark'; // 'light' 或 'dark'

// 或通过JavaScript
themeSwitcher.setTheme('dark');
themeSwitcher.setRTL(true);