我正在使用Node.js和框架Express开发一个应用程序。
我想在我的本地项目中添加Bootstrap。
我将以下内容添加到我的索引<head>
<script language="javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
app.js文件中。app.use(express.static(__dirname + '../node_modules/bootstrap/dist'));
你也可以尝试这个，对我有用。
安装Bootstrap
npm install bootstrap@3
现在在app.js文件中添加以下代码：
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));
在您的布局或任何其他文件中使用bootstrap.css
<link rel="stylesheet" href="/css/bootstrap.min.css" />
请确保您提供的路径是正确的。
希望这个能够起作用 :)
npm install --save bootstrap
server.js
var express = require("express");
var app = express();
var router = express.Router();
var path = __dirname + '/views/'; // this folder should contain your html files.
router.get("/",function(req,res){
res.sendFile(path + "index.html");
});
app.use("/",router);
app.listen(3000,function(){
console.log("Live at Port 3000");
});
index.html
这个文件应该位于你的项目/views/目录下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Single page web app using Angularjs</title>
<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home<span class="sr-only">(current)</span></a></li>
<li><a href="/about">About us</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
</div>
<br/>
<div class="jumbotron"> <p>
This is place your index including bootstrap
</p></div>
</div>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
假设您已使用以下命令安装了最新版本的Bootstrap：
npm install bootstrap
现在，假设您的根目录中有一个名为public的文件夹，您想将其用作静态资产。 假设public目录的结构如下：
'public/styles/css'
现在，如果您想使用bootstrap分发并将css文件夹的内容视为在您的public/styles/css文件夹中，则可以执行以下操作：
const express = require('express');
const app = express();
// STATIC ASSETS:
app.use(express.static(path.join(__dirname, "public"))); // <- this line will us public directory as your static assets
app.use("/styles/css", express.static(path.join(__dirname, "node_modules/bootstrap/dist/css"))); // <- This will use the contents of 'bootstrap/dist/css' which is placed in your node_modules folder as if it is in your '/styles/css' directory.node_modules是一个私有目录，不应该被公开。默认情况下，public目录是静态文件的公共根路径：
app.use(express.static(path.join(__dirname, 'public')));
-去布局文件中的视图文件夹
<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
app.use(express.static(path.join(__dirname, 'node_modules')));
我知道你说你想在本地使用它，但是对于任何想要了解如何为express项目实现bootstrap的人来说，有一个简单的方法。在你的视图共享布局页面中，只需添加cdn，这样它就会应用于每个扩展共享布局视图的页面。
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous")
script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js", integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV", crossorigin="anonymous")
<link href="path" rel="stylesheet">
这里的路径将是您本地计算机上bootstrap.min.css文件的位置。例如：
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<script src="path"></script>
这里的路径将是您本地机器上bootstrap.min.js文件的位置。由于它是javascript文件，因此您需要在此处使用script标签。在body之前添加这些行。
你想在你的项目中添加Bootstrap，但是你已经安装/下载了Bootstrap文件吗？
除非你使用express-generator（或其他生成器或框架），否则它不会默认包含在内。
你有两个选择。你可以使用yeoman生成器来搭建你的应用程序，或者你可以使用npm或yarn为你的应用程序安装Bootstrap。
只需在你的项目根目录中使用：
npm install bootstrap --save
验证node_modules文件夹中是否有bootstrap文件夹，并检查引用Bootstrap的路径是否设置正确。
你也可以手动包含Bootstrap文件，但尝试使用npm，因为它会为你安装所有依赖项。
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>
希望它能正常工作！:)
使用以下步骤是有效且简单的：
使用npm安装bootstrap
使用以下链接标签
<link rel="stylesheet" href="/css/bootstrap.min.css" />
在你的视图文件中。
src="-/node_modules/bootstrap/dist/js/bootstrap.min.js"-- 你的路径里真的有一个-吗？还是打错了？ - 31piyexpress-generator生成你的项目，并通过 npm 安装了 bootstrap？或者，你介意和我们分享一下你的项目目录结构吗？我认为这个链接可能会有帮助：https://dev59.com/wF8d5IYBdhLWcg3weyI0 - ionizerexpress-generator，然后通过 npm 安装了 Bootstarp，感谢提供的链接。 - Diego Izquierdo Dussan