【问题标题】:How can I add Bootstrap to a project in ExpressJS?如何在 ExpressJS 中将 Bootstrap 添加到项目中?
【发布时间】:2018-09-28 04:53:30
【问题描述】:

我正在使用 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...')

【问题讨论】:

  • src="-/node_modules/bootstrap/dist/js/bootstrap.min.js" -- 你的路径中真的有-,还是打错了?
  • 您是否使用express-generator 生成您的项目并通过npm 安装了引导程序?或者,您介意与我们分享一下您的项目目录结构吗?我觉得这应该可行:*.com/questions/26773767/…
  • 是的,是一个错字。 @ionizer 我使用express-generator,我通过 npm 安装了 Bootstarp,感谢链接

标签: javascript node.js twitter-bootstrap express npm


【解决方案1】:

你必须试试这个

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

我希望它会起作用! :)

【讨论】:

  • OP 希望从他自己的安装而不是 CDN 中使用引导程序。
【解决方案2】:

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

安装 boostrap:

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>

【讨论】:

  • 感谢您的评论。但是你正在使用cdn,使用Boostrap调用网络,但我需要在本地使用它。
  • 考虑到这一点,我将在本地使用引导程序更新我的答案。
【解决方案3】:

你可以试试这个:

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

此处的路径将是您本地计算机中 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 标签。在正文之前添加这些行。

【讨论】:

    【解决方案4】:

    你也可以试试这个,对我有用。

    安装引导程序

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

    确保您提供的路径正确。

    我希望这会奏效:)

    【讨论】:

    • 如何添加bootstrap js和jquery?
    【解决方案5】:

    您想在项目中添加 Bootstrap,但您是否在项目中安装/下载了引导文件?

    除非您使用 express-generator(或其他生成器或框架),否则默认情况下不会包含它。

    你有两个选择。您可以使用 yeoman 生成器来搭建应用程序,也可以使用 npm 或 yarn 为应用程序安装引导程序。

    只需使用:

    npm install bootstrap --save

    在您项目的根文件夹中。验证 node_modules 文件夹中的 bootstrap 文件夹是否可用,并检查路径是否设置正确,无论何时引用 bootstrap。

    您也可以手动包含引导文件,但请尝试使用 npm,因为它会为您安装所有依赖项。

    【讨论】:

    • 谢谢,是的,我安装了 Bootstrap。并且 Bootstrap 文件夹在 node_modules 中。
    【解决方案6】:

    假设您已经使用以下命令安装了最新版本的引导程序:

    npm install bootstrap
    

    现在,假设在您的根目录中,您有一个 public 文件夹,您希望将其用作静态资产。假设 public 目录的结构如下所示:

    'public/styles/css'

    现在,如果您想使用引导分发并使用 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.

    【讨论】:

      【解决方案7】:

      node_modules 是一个私有目录,不应暴露。默认情况下,公共目录是静态文件的公共根路径:

      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')));
      

      【讨论】:

        【解决方案8】:

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

        1. npm 安装引导程序

        2. 使用这个链接标签

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

        在您的视图文件中。

        【讨论】:

        • 请提供所需的确切命令或代码。请包括您正在谈论的链接。请解释为什么此解决方案比提供的其他答案更有帮助。