Express.js 是一个流行的 Node.js Web 应用程序框架，可以用于构建具有高度实时交互性的 Web 应用程序。Bootstrap 是一个流行的前端设计框架，可用于创建美观，响应式的 Web 界面。在本文中，我将向您展示如何结合使用 Express.js 和 Bootstrap 构建美观，响应式的 Web 应用程序。
准备工作
构建美观，响应式的 Web 应用程序需要一些基础知识，例如 HTML，CSS 和 JavaScript。您需要具有这些技能才能成功构建此类应用程序。除此之外，您需要安装 Node.js 和 Express.js 并熟悉它们的工作原理。最后，您需要了解 Bootstrap 框架的基础知识，并知道如何使用它来创建响应式的 Web 界面。
构建 Express.js 应用程序
首先，使用以下命令在终端中创建名为 myapp 的新 Express.js 应用程序。
- ----- ----- - -- ----- - --- ---- - --- ------- ------- ------
创建应用程序后，您需要定义应用程序的路由和视图。在 myapp 目录下，创建一个名为 app.js 的新文件。该文件将是您的应用程序入口点。将以下代码复制到 app.js 文件中。
----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ---------------- --------- - ---------- -------------------------------- - ------------ ------------ ------------- ---- - -------------------- --- ---------------- ---------- - ------------------- ------- -- ---- ------- ---
上面的代码设置了 Express 应用程序的视图引擎，将应用程序的视图文件存储在 views 文件夹中，并将应用程序的静态文件存储在 public 文件夹中。从根路由获取请求时，应用程序将渲染名为 index 的视图。最后，应用程序使用端口 3000 启动并开始监听请求。
添加 Bootstrap
现在，您需要添加 Bootstrap 框架以通过使用它的类来创建美观，响应式的 Web 界面。首先，从 Bootstrap 官方网站下载最新版本的 CSS 和 JavaScript 文件，然后将以下代码添加到 myapp/public/stylesheets/styles.css 文件中。
---- - ------------ ----- ------------ ---------- ------ ---------- ------ ----------- --------------- - - - ----------- - ---------- - ----------------- -
上面的 CSS 代码将应用于应用程序的所有页面。您可以从中了解到，我们想增加一些 padding 来避免网站的内容被覆盖，设置默认字体可以使内容更易读，使用了含有不同颜色的首选项，以及将内容的宽度限制为 1000px 以确保网站的实用性。
接下来，将以下代码追加到 myapp/views/index.ejs 文件中。
--------- -----
------
------
-------------- --------- ---------------
----- ------------------------------------- -----------------
----- ------------------------------ -----------------
-------
------
---- ------------- -------------- ------------------
---- ------------------
---- ----------------------
------- ------------- -------------------- ---------- ---------------------- --------------------- --------------------- -----------------------
----- ---------------------- -----------------
----- ------------------------
----- ------------------------
----- ------------------------
---------
-- -------------------- ---------------- --------- -----------
------
---- ----------- --------------- -----------------
--- ---------- ------------
------ ----------------------
------ ----------------------------
-----
------
------
------
---- ------------------
----------- -- ------- --------- ------------
-- ----------------- -- - ---- ------- ----- ----- ---------- --- --------------
------
------- ------------------------------------------
------- ---------------------------------------------
-------
-------上面的 HTML 代码定义了应用程序的布局，使用 Bootstrap 类创建了一个响应式导航栏，并使用 Bootstrap 外观提高了应用程序的视觉效果。
运行应用程序
现在，您的 Express.js 应用程序已经与 Bootstrap 集成，可以使用以下命令在终端中启动应用程序。
- ---- ------
在浏览器中访问 http://localhost:3000，您将看到一个漂亮的响应式网站，它使用 Express 和 Bootstrap 构建。
总结
本文向您展示了如何使用 Express.js 和 Bootstrap 构建美观，响应式的 Web 应用程序。这是一个基础示例，您可以根据自己的需求和喜好来定制应用程序的外观和功能。我希望这篇文章能对您有所帮助，并且能够启发您构建更好的 Web 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652f1cd37d4982a6eb036aca