如何在 Node-Express 项目中包含 bootstrap

以下代码来自代码作者。基本上它是一个引导程序/css项目，我想连接到后端。但是，我找不到使用以下代码呈现引导的方法：

文件格式：

文件名
- node_modules
- 路线
  - 公共的.js
- 视图
  - 公共资产
    - .css
    - .js
    - 图像
  - 公共.ejs
- 应用.js

应用.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文件夹应至少包含：

公共资产
- .css
  - 样式.css
  - 引导程序.min.css
- .js
  - 引导程序.min.js
  - jquery-3.5.1.min.js

添加样式表：

<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>

包括引导程序和 j 通过 ruing
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>

如果您的路径位于某个文件夹中，例如如果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:确保您的服务器文件或应用程序文件在主直接

只需在头标签中包含 css 引导 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，则可以先将以下内容添加到您的应用中.js

app.use(express.static(path.join(__dirname, "node_modules/bootstrap/dist/")));

多亏了express.static()，Express 中内置的中间件函数来提供静态文件，您现在可以通过在 HTML 页面中使用 Bootstrap

作为

<link rel="stylesheet" href="./css/bootstrap.min.css">

相关内容

最新更新

热门标签：