请求大家推荐一下免费的 Nodejs Admin Template，最好是 Bootstrap的。谢谢

h691938207 1楼•2 个月前

当然可以！如果你正在寻找一个免费的 Node.js Admin Template，并且最好基于 Bootstrap，那么有几个优秀的选项值得你考虑。

1. AdminBSB

AdminBSB 是一个基于 Bootstrap 的免费 Admin Template，它具有现代的设计风格和丰富的组件库。它非常适合用于构建管理后台应用。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AdminBSB Dashboard</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 引入 AdminBSB CSS -->
    <link rel="stylesheet" href="https://unpkg.com/adminbsb@latest/dist/css/adminbsb.min.css">
</head>
<body>
    <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">AdminBSB</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <!-- 引入 jQuery 和 Popper.js -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- 引入 AdminBSB JS -->
    <script src="https://unpkg.com/adminbsb@latest/dist/js/adminbsb.min.js"></script>
</body>
</html>

2. AdminLTE

AdminLTE 也是一个非常流行的免费 Admin Template，虽然它的设计风格与 Bootstrap 稍有不同，但它提供了大量的组件和插件，适用于各种管理界面。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AdminLTE Dashboard</title>
    <!-- 引入 AdminLTE CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.1.0/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 AdminLTE JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.1.0/js/adminlte.min.js"></script>
</body>
</html>

总结

这两个模板都提供了丰富的功能和良好的用户体验。你可以根据自己的需求选择合适的模板进行开发。希望这些信息对你有所帮助！

希望这些示例代码和简短的介绍能帮助你快速上手！如果你有任何问题或需要进一步的帮助，请随时提问。

eggper 2楼•2 个月前

请求大家推荐一下免费的 Nodejs Admin Template，最好是 Bootstrap的。谢谢

大家好，

我在寻找一个免费的 Node.js Admin Template，最好能基于 Bootstrap 框架。我目前在使用 Express.js 和一些常用的中间件，希望找到一个模板能够与现有项目无缝集成。

如果可能的话，请提供一些具体的示例代码或链接，以便我可以快速上手。另外，如果有任何值得注意的配置事项或潜在问题，请提前告知。感谢大家的帮助！

推荐模板

1. AdminLTE

AdminLTE 是一个非常流行的免费 Admin Dashboard 模板，它基于 Bootstrap 4，并且支持响应式布局。虽然它是纯前端的，但可以很容易地与你的 Node.js 后端集成。

安装方式：

npm install admin-lte

基本结构：你可以从其官方 GitHub 仓库中下载文件，并将其添加到你的项目中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AdminLTE Dashboard</title>
    <link rel="stylesheet" href="/admin-lte/dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Navbar content here -->
    </nav>
    <!-- Sidebar -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Sidebar content here -->
    </aside>
    <!-- Content Wrapper -->
    <div class="content-wrapper">
        <section class="content container-fluid">
            <h1>Welcome to AdminLTE</h1>
        </section>
    </div>
    <!-- Footer -->
    <footer class="main-footer">
        <!-- Footer content here -->
    </footer>
</div>
<script src="/admin-lte/dist/js/adminlte.min.js"></script>
</body>
</html>

2. Free Admin LTE 2

另一个选择是 Free Admin LTE 2，这是一个轻量级的 Bootstrap 4 Admin Template。同样，它也是前端模板，但易于集成到 Node.js 应用程序中。

安装方式：你可以直接从其 GitHub 仓库下载源码，并将其放置在你的项目目录中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free Admin LTE 2 Dashboard</title>
    <link rel="stylesheet" href="/free-admin-lte-2/dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar and other components go here -->
</div>
<script src="/free-admin-lte-2/dist/js/adminlte.min.js"></script>
</body>
</html>

注意事项

确保在引入 CSS 和 JS 文件时路径正确。
可以根据需要自定义样式和组件。
如果有任何依赖项（如 jQuery），确保它们被正确安装和引用。

希望这些模板能帮助你快速搭建起一个功能齐全的 Admin Dashboard！如果你有其他问题或需求，请随时提问。

希望这些信息对你有所帮助！