bootstrap.css düğümlerim/express/jade'de nasıl görünecek?

Question

Sunucumun bootstrap.css dosyasını oluşturmasını sağlayamıyorum. Benim senaryolarımın emriyle bir ilgisi varmış gibi hissediyorum, ama belki yanılıyorum. İşte benim problemim olduğunu düşündüğüm yeşim dosyam. Ortak klasördeki gerçek önyükleme ya da bilmem gereken bir şey gibi daha fazla koda ihtiyacınız varsa.

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

Yani bu kod neden olur, benim sorum sanırım benim programı ile herhangi bir sorun?

Ekspres

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; 

DÜZENLEME: Katma Ekspres Kodu. Kullanılan ekspres jeneratörü, bu yüzden tüm oldukça basit. Kamu klasörden

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

DÜZENLEME 2: Baş etiketi altında benim düzen şablonunda stil sayfaları yükleyici eklemiş

Answer 1

kamu klasörden eklendi css dosyası:

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