在现代 Web 开发中，美观的界面是至关重要的。而使用 Express.js 和 Bootstrap 可以使我们更加轻松地创建美观的 Web 界面。在本文中，我们将介绍如何使用 Express.js 和 Bootstrap 来创建一个简单而漂亮的 Web 界面，并提供详细的步骤和示例代码。
什么是 Express.js 和 Bootstrap？
Express.js 是一种流行的 Node.js Web 应用程序框架，它提供了一种简单而灵活的方式来构建 Web 应用程序。它具有强大的路由和中间件功能，可以轻松地处理 HTTP 请求和响应。
Bootstrap 是一种流行的前端框架，它提供了一组可重用的 CSS 类和 JavaScript 插件，可以轻松地创建漂亮的界面。它具有自适应布局和响应式设计，可以适应不同的屏幕大小和设备类型。
使用 Express.js 和 Bootstrap，我们可以轻松地创建具有良好外观和功能的 Web 应用程序。
步骤
以下是使用 Express.js 和 Bootstrap 创建 Web 界面的详细步骤：
步骤 1：安装 Express.js 和 Bootstrap
首先，我们需要安装 Express.js 和 Bootstrap。打开终端，并输入以下命令：
npm install express bootstrap
这将安装最新版本的 Express.js 和 Bootstrap。
步骤 2：创建 Express.js 应用程序
接下来，我们将创建一个 Express.js 应用程序。在终端中，输入以下命令：
mkdir myapp cd myapp npm init -y
这将创建一个名为 myapp 的新目录，并初始化一个新的 Node.js 应用程序。
步骤 3：添加 Express.js 路由
下一步，我们将添加一些 Express.js 路由。在 myapp 目录中，创建一个名为 index.js 的新文件，并输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
这将创建一个简单的 Express.js 应用程序，它将在根路径下返回“Hello World!”。
步骤 4：添加 Bootstrap 样式
接下来，我们将添加一些 Bootstrap 样式。在 myapp 目录中，创建一个名为 public 的新目录，并在其中创建一个名为 styles.css 的新文件。在 styles.css 文件中，输入以下代码：
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}这将为我们的页面添加一些基本的 Bootstrap 样式。
步骤 5：创建 HTML 模板
下一步，我们将创建一个 HTML 模板。在 myapp 目录中，创建一个名为 views 的新目录，并在其中创建一个名为 index.ejs 的新文件。在 index.ejs 文件中，输入以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----------------- --- -----------------
----- ---------------- -------------------
----- ---------------- --------------------------------------------------------------------------------
-------
------
---- ------------- ---------------- ----------- ------- -----------
-- -------------------- ------------------- --- -------------
------
----- ----------- ------------------
---- -------------------------
--------- -----------
-- ----------------- -- - ------ ------- -- ----- ---------- --- --------------
------
-------
------- ----------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
-------
-------这将为我们的页面创建一个基本的 HTML 模板，并添加 Bootstrap 导航栏和样式。
步骤 6：更新 Express.js 路由
最后，我们将更新 Express.js 路由，以使用我们的新 HTML 模板。在 index.js 文件中，输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ---------------------------------- ------------ ----- ---- -- - -------------------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
这将使用我们的新 HTML 模板来渲染根路径。
步骤 7：启动应用程序
现在，我们已经完成了所有步骤，可以启动我们的应用程序。在终端中，输入以下命令：
node index.js
这将启动我们的 Express.js 应用程序，并在浏览器中打开 http://localhost:3000。您应该看到一个简单的页面，它使用 Bootstrap 样式和 HTML 模板。
结论
在本文中，我们介绍了如何使用 Express.js 和 Bootstrap 创建美观的 Web 界面。我们提供了详细的步骤和示例代码，以帮助您开始使用这些强大的工具。无论您是初学者还是有经验的开发人员，这些技术都可以帮助您创建出色的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677a309e5c5a933a34120508