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

我正在使用nodejs和框架Express开发一个应用程序。我想在本地将引导程序添加到我的项目中。我将其添加到我的索引<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'));

但它也不起作用。(我想到了引导程序的路径并使用"../模块...'too(

你也可以

试试这个，为我工作。

安装引导程序

npm install bootstrap@3

现在在 app.js 文件中添加以下代码：

app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));

在布局或任何其他文件中使用引导.css

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

确保您提供的路径正确。

我希望这会:)

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

安装提升说唱：

npm install --save bootstrap

服务器.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");
});

索引.html

此文件应位于您的项目/视图/：

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

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

npm install bootstrap

现在，假设在根目录中，您有一个要将其用作静态资产的公用文件夹。假设公共目录的结构如下所示：

'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是一个

私有目录，不应该公开。默认情况下，公共目录是静态文件的公共根路径：

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

你可以试试这个：

 <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文件，因此您需要在此处使用脚本标签。在正文之前添加这些行。

您想在项目中添加引导程序，但您是否在项目中安装/下载了引导程序文件？

除非使用的是快速生成器(或其他生成器或框架(，否则默认情况下不会包含它。

您有两种选择。您可以使用 yeoman 生成器来搭建应用程序基架，也可以使用 npm 或 yarn 为您的应用程序安装引导程序。

只需使用：

npm install bootstrap --save

在项目的根文件夹中。验证引导程序文件夹是否node_modules文件夹中可用，并检查在引用引导程序的任何位置是否正确设置了路径。

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

我知道你说你想在本地使用它，但对于任何想知道为快速项目实现引导的简单方法的人。在视图共享布局页面中，只需添加 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")

你必须试试这个

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

使用此链接标记

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

在您的视图文件中。

相关内容

最新更新

热门标签：