如何将Bootstrap添加到ExpressJS中的项目？

iyr7buue 于 2023-04-09 发布在 Bootstrap

关注(0)|答案(9)|浏览(154)

我正在使用nodejs和框架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 的路径，并且也使用了'../modules...'）

twitter-bootstrap

来源：https://stackoverflow.com/questions/49891373/how-can-i-add-bootstrap-to-a-project-in-expressjs

9条答案

按热度按时间

qjp7pelc1#

你也可以试试这个，对我有用。
安装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" />

请确保您提供的路径正确。
我希望这会起作用：）

赞(0）回复(0）举报 2023-04-09

7vhp5slm2#

您应该在html文件中引用样式表。

安装bootstrap：

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

此文件应位于yourProject/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>

赞(0）回复(0）举报 2023-04-09

dl5txlt93#

假设您已经使用以下命令安装了最新版本的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.

赞(0）回复(0）举报 2023-04-09

bqujaahr4#

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>

如果您真的想提供node_modules（这不是一个好主意），请在app.use（express.static（...））下面添加以下内容;上一行：

app.use(express.static(path.join(__dirname, 'node_modules')));

赞(0）回复(0）举报 2023-04-09

yiytaume5#

你可以试试这个：

<link href="path" rel="stylesheet">

这里的path是bootstrap.min.css文件在本地机器上的位置。例如：

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

类似地，您可以对bootstrap.min.js执行此操作。如下所示：

<script src="path"></script>

这里的路径是bootstrap.min.js文件在本地机器上的位置。由于它是javascript文件，因此需要在这里使用script标签。在body之前添加这些行。

赞(0）回复(0）举报 2023-04-09

fykwrbwg6#

你想在你的项目中添加Bootstrap，但是你已经在你的项目中安装/下载了bootstrap文件吗？
除非你使用的是express-generator（或者其他的generator或者framework），否则默认情况下不会包含它。
你有两个选择，你可以使用yeoman generators来搭建你的应用程序，或者你可以使用npm或yarn来为你的应用程序安装bootstrap。
只需用途：
npm install bootstrap --保存
在项目根文件夹中。验证node_modules文件夹中的bootstrap文件夹是否可用，并检查引用bootstrap的路径是否设置正确。
您也可以手动包含bootstrap文件，但请尝试使用npm，因为它会为您安装所有依赖项。

赞(0）回复(0）举报 2023-04-09

4uqofj5v7#

我知道你说你想在本地使用它，但是对于任何想知道一个简单的方法来实现一个express项目的bootstrap的人来说，在你的views共享布局页面中，只需要添加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")

赞(0）回复(0）举报 2023-04-09

wbrvyc0a8#

你一定要试试这个

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

我希望它能起作用！：）

赞(0）回复(0）举报 2023-04-09

wb1gzix09#

使用以下步骤既有效又简单：

npm install bootstrap
1.使用此链接标记

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

在你的视图文件中。

赞(0）回复(0）举报 2023-04-09

我来回答

如何将Bootstrap添加到ExpressJS中的项目？

9条答案

相关问题

热门标签

最新问答