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 应用程序。
> mkdir myapp > cd myapp > npm init > npm install express --save
创建应用程序后，您需要定义应用程序的路由和视图。在 myapp 目录下，创建一个名为 app.js 的新文件。该文件将是您的应用程序入口点。将以下代码复制到 app.js 文件中。
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index');
});
app.listen(3000, function() {
console.log('Server started on port 3000');
});上面的代码设置了 Express 应用程序的视图引擎，将应用程序的视图文件存储在 views 文件夹中，并将应用程序的静态文件存储在 public 文件夹中。从根路由获取请求时，应用程序将渲染名为 index 的视图。最后，应用程序使用端口 3000 启动并开始监听请求。
添加 Bootstrap
现在，您需要添加 Bootstrap 框架以通过使用它的类来创建美观，响应式的 Web 界面。首先，从 Bootstrap 官方网站下载最新版本的 CSS 和 JavaScript 文件，然后将以下代码添加到 myapp/public/stylesheets/styles.css 文件中。
// javascriptcn.com 代码示例
body {
padding-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
}
a {
color:#999;
}
.container {
max-width:1000px;
}上面的 CSS 代码将应用于应用程序的所有页面。您可以从中了解到，我们想增加一些 padding 来避免网站的内容被覆盖，设置默认字体可以使内容更易读，使用了含有不同颜色的首选项，以及将内容的宽度限制为 1000px 以确保网站的实用性。
接下来，将以下代码追加到 myapp/views/index.ejs 文件中。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Express Bootstrap Website</title>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Express Bootstrap Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Welcome to Express Bootstrap Website</h1>
<p class="lead">This is a demo website built using Express.js and Bootstrap.</p>
</div>
<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>上面的 HTML 代码定义了应用程序的布局，使用 Bootstrap 类创建了一个响应式导航栏，并使用 Bootstrap 外观提高了应用程序的视觉效果。
运行应用程序
现在，您的 Express.js 应用程序已经与 Bootstrap 集成，可以使用以下命令在终端中启动应用程序。
> node app.js
在浏览器中访问 http://localhost:3000，您将看到一个漂亮的响应式网站，它使用 Express 和 Bootstrap 构建。
总结
本文向您展示了如何使用 Express.js 和 Bootstrap 构建美观，响应式的 Web 应用程序。这是一个基础示例，您可以根据自己的需求和喜好来定制应用程序的外观和功能。我希望这篇文章能对您有所帮助，并且能够启发您构建更好的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f1cd37d4982a6eb036aca