Ich entwickle eine Anwendung mit nodejs und dem Framework Express. Ich möchte Bootstrap lokal zu meinem Projekt hinzufügen. Ich habe dies meinem Index hinzugefügt <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"/>

Ich habe festgestellt, dass ich diesen Code zu meinem app.js hinzufügen muss

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

Aber es funktioniert auch nicht. (Ich denke an den Pfad des Bootstraps und verwende auch '../ modules ...')

5
Diego Izquierdo Dussan 18 Apr. 2018 im 07:48

7 Antworten

Beste Antwort

Sie sollten Ihr Stylesheet in Ihrer HTML-Datei referenzieren.

Bootstrap installieren:

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

Diese Datei sollte sich in yourProject / views / befinden:

<!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>
3
Evgeniy Kuzmin 20 Nov. 2018 im 20:20

Sie können dies auch versuchen, für mich gearbeitet.

Installieren Sie den Bootstrap

npm install bootstrap@3

Fügen Sie nun in der Datei app.js den folgenden Code hinzu:

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

Verwenden Sie bootstrap.css in Ihrem Layout oder einer anderen Datei

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

Stellen Sie sicher, dass der von Ihnen angegebene Pfad korrekt ist.

Ich hoffe das wird funktionieren :)

11
Lalit Dashora 18 Apr. 2018 im 06:14

Node_modules ist ein privates Verzeichnis und sollte nicht verfügbar gemacht werden. Standardmäßig ist das öffentliche Verzeichnis der öffentliche Stammpfad für statische Dateien:

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

- Wechseln Sie zum Ansichtsordner in der Layoutdatei

<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Wenn Sie node_modules wirklich bereitstellen möchten, was eine schlechte Idee wäre, fügen Sie Folgendes unter der app.use hinzu (express.static (...)); Zeile oben:

app.use(express.static(path.join(__dirname, 'node_modules')));
1
Abdo-Host 2 Feb. 2020 im 14:08

Sie können dies versuchen:

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

Hier ist der Pfad der Speicherort der Datei bootstrap.min.css auf Ihrem lokalen Computer. Beispiel:

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

Ebenso können Sie dies für bootstrap.min.js tun. Wie nachfolgend dargestellt:

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

Auch hier ist der Pfad der Speicherort der Datei bootstrap.min.js auf Ihrem lokalen Computer. Da es sich um eine Javascript-Datei handelt, müssen Sie hier das Tag script verwenden. Fügen Sie diese Zeilen vor dem Körper hinzu.

0
Nitin Bisht 18 Apr. 2018 im 05:03

Sie möchten Bootstrap zu Ihrem Projekt hinzufügen, haben aber Bootstrap-Dateien in Ihrem Projekt installiert / heruntergeladen?

Sofern Sie keinen Express-Generator (oder andere Generatoren oder Frameworks) verwenden, wird dieser standardmäßig nicht berücksichtigt.

Sie haben zwei Möglichkeiten. Sie können Yeoman-Generatoren verwenden, um Ihre Anwendung zu erstellen, oder Sie können npm oder Garn verwenden, um Bootstrap für Ihre Anwendung zu installieren.

Benutz einfach:

npm install bootstrap --save

Im Stammordner Ihres Projekts. Stellen Sie sicher, dass der Bootstrap-Ordner im Ordner node_modules verfügbar ist, und überprüfen Sie, ob der Pfad überall dort korrekt festgelegt ist, wo auf Bootstrap verwiesen wird.

Sie können Bootstrap-Dateien auch manuell einschließen. Versuchen Sie jedoch, npm zu verwenden, da alle Abhängigkeiten für Sie installiert werden.

0
Shahrukh Haider 18 Apr. 2018 im 06:18

Angenommen, Sie haben die neueste Version von Bootstrap mit dem folgenden Befehl installiert:

npm install bootstrap

Angenommen, Sie haben in Ihrem Stammverzeichnis einen öffentlichen Ordner, den Sie als statisches Asset verwenden möchten. Angenommen, die Struktur des Verzeichnisses public sieht folgendermaßen aus:

'public/styles/css'

Wenn Sie nun die Bootstrap-Distribution verwenden und den Inhalt des CSS-Ordners so verwenden möchten, als ob er sich in Ihrem public/styles/css -Ordner befindet, können Sie Folgendes tun:

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
Amir Salar 30 März 2019 im 18:54

Sie müssen dies versuchen

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

Ich hoffe es wird funktionieren! :) :)

-2
Ronnie Jimenez 18 Apr. 2018 im 04:53