twitter-bootstrap 如何将 Bootstrap 添加到 ExpressJS 中的项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49891373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add Bootstrap to a project in ExpressJS?
提问by Diego Izquierdo Dussan
I'm developing an aplication using nodejs and the framework Express.
I want to add Bootstrap to my project in local.
I added this to my index <head>
我正在使用 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"/>
I found that I have to add this code to my app.js
我发现我必须将此代码添加到我的 app.js
app.use(express.static(__dirname + '../node_modules/bootstrap/dist'));
but it doesn't works too. (I have in mind the path of the Bootstrap and use '../modules...' too)
但它也不起作用。（我记住了 Bootstrap 的路径并使用 '../modules...' ）
采纳答案by Delcio Manuel Polanco Padilla
You should reference your stylesheet in your html file.
您应该在 html 文件中引用您的样式表。
install boostrap:
安装助推器：
npm install --save bootstrap
server.js
服务器.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
索引.html
This file should be located in yourProject/views/:
此文件应位于 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>
回答by Lalit Dashora
You can try this as well, worked for me.
你也可以试试这个，对我有用。
Install bootstrap
安装引导程序
npm install bootstrap@3
Now in app.js file add the following code:
现在在 app.js 文件中添加以下代码：
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));
Use bootstrap.css in your layout or any other file
在您的布局或任何其他文件中使用 bootstrap.css
<link rel="stylesheet" href="/css/bootstrap.min.css" />
Make sure the path you have provided is correct.
确保您提供的路径正确。
I hope this will work :)
我希望这会奏效:)
回答by Abdo-Host
node_modules is a private directory and shouldn't be exposed. By default the public directory is the public root path for static files:
node_modules 是私有目录，不应公开。默认情况下，公共目录是静态文件的公共根路径：
app.use(express.static(path.join(__dirname, 'public')));
- Go to views folder in layout file
- 转到布局文件中的视图文件夹
<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
If you really wanted to serve up node_modules, which would be a bad idea, add the following beneath the app.use(express.static(...)); line above:
如果您真的想提供 node_modules，这将是一个坏主意，请在 app.use(express.static(...)); 下方添加以下内容。上一行：
app.use(express.static(path.join(__dirname, 'node_modules')));
回答by Shahrukh Haider
You want to add Bootstrap in your project, but have you installed/ downloaded bootstrap files in your project?
您想在项目中添加 Bootstrap，但是您是否在项目中安装/下载了 Bootstrap 文件？
Unless you are using express-generator (or other generators or frameworks), it won't be included by default.
除非您使用 express-generator（或其他生成器或框架），否则默认情况下不会包含它。
You have two options. You can use yeoman generators to scaffold your application or you can use npm or yarn to install bootstrap for your application.
你有两个选择。您可以使用 yeoman 生成器来构建您的应用程序，或者您可以使用 npm 或 yarn 为您的应用程序安装引导程序。
Just use:
只需使用：
npm install bootstrap --save
npm install bootstrap --save
in your project's root folder. Verify that bootstrap folder in available in node_modules folder and check if the path is correctly set wherever bootstrap is referred.
在您项目的根文件夹中。验证 node_modules 文件夹中的 bootstrap 文件夹是否可用，并检查在引用 bootstrap 的地方是否正确设置了路径。
You can also manually include bootstrap files, but try using npm as it installs all the dependencies for you.
您也可以手动包含引导程序文件，但请尝试使用 npm，因为它会为您安装所有依赖项。
回答by Amir Salar
Let's assume that you have installed the latest version of bootstrap using the following command:
假设您已使用以下命令安装了最新版本的引导程序：
npm install bootstrap
Now, assume that in your root directory, you have a publicfolder that you want to use that as your static asset. Assume that the structure of the publicdirectory looks like the following:
现在，假设你的根目录下，你有一个公众要使用它作为你的静态资产文件夹。假设公共目录的结构如下所示：
'public/styles/css'
'public/styles/css'
Now if you want to use the bootstrap distribution and use the contents of the css folder as if it is in your public/styles/cssfolder, you may do the following:
现在，如果您想使用引导程序分发并使用 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.回答by Nitin Bisht
You can try this:
你可以试试这个：
<link href="path" rel="stylesheet">
Here path will be the location of bootstrap.min.css file in your local machine. Example:
这里的路径将是本地机器中 bootstrap.min.css 文件的位置。例子：
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
Similarly you can do this for bootstrap.min.js. As shown below:
同样，您可以为 bootstrap.min.js 执行此操作。如下所示：
<script src="path"></script>
Again Here path will be the location of bootstrap.min.js file in your local machine. Since It is javascript file Hence You need to use scripttag here. Add these lines before body.
再次这里路径将是本地机器中 bootstrap.min.js 文件的位置。由于它是 javascript 文件，因此您需要在此处使用脚本标记。在正文之前添加这些行。
回答by Ronnie Jimenez
You must try this
你必须试试这个
<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>
I hope it will works! :)
我希望它会起作用！:)
