bootstrap einbinden greif nicht zu./nodejs

[C4non]

Vorweg, ich bin total newbie. Ich habe nodejs installiert + express + pug. Alles schön und gut, wenn ich jetzt aber bootstaps verwenden will greift das nicht. Also npm install bootstrap und dann in index.pug (link(rel='stylesheet' href='/node_modules/bootstrap/dist/css/bootstrap.css') eingebunden wo sich boostrape befindet. funktioniert leider nicht, oder habe ich was vergessen?

 

[Toms]

NodeJS und Express ist ein Serverframework. Was willst du mit einem Frontendframework wie Bootstrap auf nem Server?

 

[C4non]

Funktioniert das generelle nicht? Auch nicht mit Pug? Ich hab ne html mit hilfe von Pug erstellt und stylesheet etc gebastelt nun wollte ich halt noch bootstrap verwenden.

 

[Bagbag]

Das funktioniert natürlich. Hast du denn ein endpoint, der die bootstrap Dateien ausgibt?
(Tipp: Entwicklerkonsole im Browser öffnen)

 

[Darrel]

Hi @C4non ,

ich glaube das Stichwort hier wäre "statische Dateien"/ "static files" (siehe hier: Serving static files in Express).

Falls du deine .css-Datei am jetzigen Ort behalten magst, hast du in deiner app.js (oder wie auch immer die Datei bei dir heißt) etwas wie das Folgende stehen?

app.use("/bootstrap", express.static(path.join(__dirname, "node_modules/bootstrap/dist/css")));

Die passende Verlinkung in deiner .pug-Datei:

link(rel='stylesheet', href='/bootstrap/bootstrap.css')

 

[C4non]

Habe ich, funktioniert irgendwie trotzdem nicht.

 

[Darrel]

Vielleicht liegt es daran, dass du in dem virtual path das "/" vergessen hast?

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

Also bei meinem kurzen Test funktionierte das Laden von Bootstrap problemlos.

Falls es nicht daran liegt und grundsätzlich:
Es ist immer schwierig zu sagen woran es liegt, wenn jemand schreibt, dass etwas nicht funktioniert und man nicht das ganze Bild (den gesamten Code) sehen kann. Auch ist eine genauere Beschreibung immer hilfreich. Was genau funktioniert nicht: Die Frage von @Bagbag in Post #4 hast du nicht zufällig übersehen? Wird die CSS-Datei geladen, spuckt die Konsole etwas aus?

 

[C4non]

Ich hab es hinbekommen. Eine andere Frage habe ich:
wenn ich sowas habe und es auch funktioniert. Wie kann ich dann ein bootstrap alert verwenden bzw. allgemein das alert bissel schöner machen?

if( !confirm('Are you sure you want to continue?')) {
return false;
}

 

[abcddcba]

Du kannst sowas z.B. einbinden und verwenden: https://github.com/sweetalert2/sweetalert2

 

[Bagbag]

Die Bootstrap Component dafür wäre das Modal.

 

[C4non]

Vielen Dank. Ich muss mich damit erstmal mich auseinadersetzen wie ich das im PUG Html umsetzen kann und vorallem wie ich aus der if( !confirm('blabla') ein wunderschönen modal machen kann.

 

[C4non]

Wie handele ich das um, das es dann immernoch funktioniert? Aus
$('button#btnSave').click(function()
{
if(confirm("Really?"))
{
return;
}

zu

$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},