Die*_*san 3 javascript node.js npm express twitter-bootstrap
我正在使用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 ...'）
小智 8
您也可以尝试这个，为我工作。
安装引导程序
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" />
确保您提供的路径正确。
我希望这会起作用:)
小智 6
您应该在 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
此文件应位于 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>
| 归档时间： |
|
| 查看次数： |
6798 次 |
| 最近记录： |