[英]how to include bootstrap in a node-express project
以下代码来自代码作者。 基本上它是一个我想连接到后端的 bootstrap/css 项目。 但是，我找不到使用以下代码呈现引导程序的方法：
文件形式：
应用程序.js
const express = require('express');
const app = express();
const port=4000;
const publicRouter = require('./routes/public');
const path = require('path');
app.listen(port,()=>{
console.log(`listening to port ${port}`);
});
app.set('view engine','ejs');
app.use(express.static(path.join(__dirname, 'views')));
app.use('/',publicRouter);
公共.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSite Title</title>
<link rel="stylesheet" href="publicAssets/css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="top-bar">
<div class="row">
<div class="col-md-8 col-lg-9 d-flex breaking-news-bar">
<div class="breaking-title"><h6>Trending</h6></div>
<div class="owl-carousel owl-theme owl-loaded breaking">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item b-news-item"><a href="#">01.Lorem ipsum dolor sit amet.</a></div>
<div class="owl-item b-news-item"><a href="#">02.Lorem ipsum dolor sit amet.</a></div>
<div class="owl-item b-news-item"><a href="#">03.Lorem ipsum dolor sit amet.</a></div>
<div class="owl-item b-news-item"><a href="#">03.Lorem ipsum dolor sit amet.</a></div>
</div>
</div>
<div class="owl-nav">
<div class="owl-prev">
<i class="fas fa-angle-left"></i>
</div>
<div class="owl-next">
<i class="fas fa-angle-right"></i>
</div>
</div>
<!-- End breaking news -->
</div>
</div>
<div class="col-md-4 col-lg-3">
</div>
</div>
</div>
</header>
</div>
<script src="publicAssets/js/bootstrap.min.js"></script>
<script src="publicAssets/js/jquery-3.5.1.min.js"></script>
<script src="publicAssets/js/custom.js"></script>
<script src="publicAssets/js/owl.carousel.min.js"></script>
</body>
</html>
CSS工作正常，但我不能使用引导程序
有几种方法可以包含 Bootstrap，但所有这些都归结为public.ejs的<head>元素中缺少的样式表。
此外，当您包含脚本时， jquery-3.5.1.min.js应该放在bootstrap.min.js前面，因为 Bootstrap 4 依赖于 jQuery。
方法 1. 手动下载并包含所有资产
这似乎是您的教程试图做的。
publicAssets文件夹应至少包含：<head>
...
<link rel="stylesheet" href="publicAssets/js/bootstrap.min.css"></link>
...
</head>
...
<script src="publicAssets/js/jquery-3.5.1.min.js"></script>
<script src="publicAssets/js/bootstrap.min.js"></script>
...
</body>
您可能还应该下载 font-awesome 作为本地资产，并在完成开发后使用 Webpack 或 Browserify 之类的捆绑程序。
方法 2. 将其作为节点模块包含在内
npm i bootstrap@latest jquery@latest
<head>
...
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></link>
...
</head>
...
<script src="node_modules/node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
...
</body>
请记住，这种方法几乎需要使用某种捆绑器，但您可能还是想这样做。
方法 3. 包含所有资产作为 CDN 的链接
完全跳过下载资产并使用他们的网络托管版本：
<head>
...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
...
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
...
</body>
通过ruing包括bootstrap和j Query
npm install bootstrap@latest jquery@latest
或者npm i bootstrap@latest jquery@latest
现在检查您的静态中间件路径
如果app.use(express.static(__dirname))表示您在主目录中
通过给出简单的路径来包括<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
如果您的路径在某个文件夹中，例如 if app.use(express.static(__dirname, "some folder" ))这意味着您在主目录中
通过给出简单的路径来包括<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="../node_modules/node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Note:确保您的服务器文件或应用程序文件在主目录中
只需在 head 标签中包含 css bootstrap cdn： <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head>
如果您使用 Express，您可以先将以下内容添加到您的app.js
app.use(express.static(path.join(__dirname, "node_modules/bootstrap/dist/")));
感谢express.static() ，这是 Express 中用于提供静态文件的内置中间件函数，您现在可以通过将 Bootstrap 链接到它来在 HTML 页面中使用它
<link rel="stylesheet" href="./css/bootstrap.min.css">
如何在我的项目中包含Bootstrap 3和JQuery Datatables？
[英]How to include Bootstrap 3 and JQuery Datatables in my project?
如何在 angular 项目中包含 popper.js 和 bootstrap.js
[英]How to include popper.js and bootstrap.js in angular project
如何在 html 文件内的节点模块文件夹中包含引导插件（输入微调器）。
[英]how to include a bootstrap plugin(input spinner) present in node module folder inside a html file.?
如何在具有babel，Node.js和Webpack的项目中包含jQuery？
[英]How do I include jQuery in a project with babel, Node.js, and webpack?
如何通过 npm 安装在 node.js 项目上设置引导程序安装
[英]How to set up bootstrap installation on node.js project via npm installation
将bootstrap jQuery etc libs包含到项目中的首选方法是什么？
[英]what is a preferred way to include bootstrap jQuery etc libs into project?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.