javascript - 如何让 bootstrap.css 显示在 node/express/jade 中？

Question

我似乎无法让我的服务器渲染我的 bootstrap.css。我觉得这与我的脚本顺序有关，但也许我错了。这是我的 Jade 文件，这就是我觉得我的问题所在。如果您需要更多代码，例如公共(public)文件夹中的实际 Bootstrap 或任何内容，请告诉我。

Jade

extends layout

    block sources

        link(rel= "stylesheet prefetch", href= "stylesheets/A6/bootstrap.css")
        link(rel= "stylesheet", href="/stylesheets/A6/a6.css") 


        block content


            p#title.col-xs-12.bg-primary.text-center
            | Tic - Tac - Toe!
            div.col-xs-3.bg-info
            div.bg-primary.controls
                span
                button.btn.btn-default(data-bind="click: StartMessage.bind($root)")
                    | New Game
                p#message.lead(data-bind="if: theMessage.mainMessage")
                    |Welcome to Tic Tac Toe! This is a 2-player game. Press the "New Game" button above to play.
                p#message2.lead(data-bind="if: theMessage.player1Message")
                    |Player 1, it's your turn.
                p#message3.lead(data-bind="if: theMessage.player2Message")
                    |Player 2, it's your turn.
                p#message4.lead(data-bind="text: theMessage.playerWinMessage()")

                p#message5.lead(data-bind="text:theMessage.drawMessage()")

                h1 Score
                table#score
                    tr
                    th Player 1
                    th Player 2
                    tr
                    td#p1(data-bind="text:player1Score") 
                    td#p2(data-bind="text:player2Score")

            table.bg-success(data-bind="css:{unclickable: playerWin()}" style="table-layout:fixed;")
            tr#row1(data-bind="foreach:topRow")
                td(data-bind="text:symbol,click:$parent.PlayerTurn")
            tr#row2(data-bind="foreach:middleRow")
                td(data-bind="text:symbol,click:$parent.PlayerTurn")    
            tr#row3(data-bind="foreach:bottomRow")
                td(data-bind="text:symbol,click:$parent.PlayerTurn")



                script(src="/javascripts/A6/knockout.js")
                script(type='text/javascript', src="/javascripts/A6/a6.js")

所以我想我的问题是，这段代码会给我的程序带来任何问题吗？

express

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
var a1 = require('./routes/a1');
var a2 = require('./routes/a2')
var a3 = require('./routes/a3')
var a4 = require('./routes/a4')
var a5 = require('./routes/a5')
var a6 = require('./routes/a6')

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
app.use('/a1',a1);
app.use('/a2',a2);
app.use('/a3',a3);
app.use('/a4',a4);
app.use('/a5',a5);
app.use('/a6',a6);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

编辑:添加了快速代码。使用过 Express 生成器，所以它非常基本。

公共(public)文件夹中的 CSS

body {
  margin: 10px;
  min-width: 628px;
}
.unclickable {
  pointer-events: none;
}
#title.col-xs-12.bg-primary.text-center {
  line-height: 100px;
  height: 100px;
  font-size: 5em;
  font-weight: bold;
  border: solid black 1px;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
div.col-xs-3.bg-info {
  height: 501px;
  border: solid 1px;
}
div.col-xs-3.bg-info div.bg-primary.controls {
  height: 475px;
  margin-top: 13px;
  margin-bottom: 13px;
  padding: 10px;
}
div.col-xs-3.bg-info div.bg-primary.controls button.btn.btn-default {
  width: 100px;
  display: block;
  margin: 0 auto;
}
div.col-xs-3.bg-info div.bg-primary.controls p.lead {
  text-align: center;
  padding: 5px;
}
table.bg-success {
  height: 501px;
  width: 75%;
}
table.bg-success td {
  border: solid black 4px;
  text-align: center;
  font-size: 8em;
  cursor: pointer;
  height: 34%;
}
h1 {
  text-align: center;
}
table#score {
  height: 100px;
  width: 95%;
}
table#score th {
  border-bottom: solid black 2px;
  text-align: center;
}
table#score #p1 {
  border-right: solid black 2px;
}
table#score td {
  text-align: center;
}

编辑2:从公共(public)文件夹添加css文件

Answer 1

我已在布局模板的 head 标签下添加了样式表加载器:

doctype html
html(lang="en")
  head
  link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')enter code here