鏈接到Bootstrap的本地副本CSS

因此，這是問題所在。我正在開發一個適用於工作的角度+引導程序，而且我處於開發的最初階段。我試圖用bootstrap構建一些UI。但是，由於某種原因，任何時候我鏈接到Bootstrap的本地副本，所有的CSS都會中斷。它是否被縮小並不重要。鏈接到Bootstrap的本地副本CSS

這是我現在所擁有的

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="/client/app/lib/bootstrap/bootstrap.css"> 
    <!-- Latest compiled and minified CSS --> 
    <!--<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">--> 
</head> 
<nav> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation"><a>Option A</a></li> 
      <li role="presentation"><a>Option B</a></li> 
      <li role="presentation"><a>Option C</a></li> 
      <li role="presentation" class="active"><a>Option D</a></li> 
     </ul> 
</nav> 
<body> 


    <div class="container"> 
     <div class="panel panel-default"> 
      <div class="panel-body">Stuff goes here!</div> 
     </div> 
    </div> 

</body> 
</html>

如果我註釋掉引導的CDN版本和未發表評論我的本地副本，一切工作正常。我寧願使用本地副本，以便脫機工作。任何幫助將不勝感激。

編輯

只是爲了顯示我的本地路徑是正確的，這裏是該項目的文件夾結構（忽略node_modules文件夾的內容）

Client 
\---app 
    +---core 
    \---lib 
     +---angular (ignoring content of this folder) 
     +---bootstrap 
       bootstrap.css 
     \---font-awesome-4.5.0 (ignoring content of this folder) 
\---node_modules (ignoring content of this folder) 
Server 
    web-server.js

EDIT 2

我正在查看Chrome中的開發人員工具，以查看可能存在哪些錯誤（感謝Anonymouse提供給我的想法），以下是poppe d高達

Uncaught SyntaxError: Unexpected token <    bootstrap.js:1

下，將帶我去的index.html，並着重說明我對bootstrap.js腳本標記線。

這裏是一個錯誤

Resource interpreted as Stylesheet but transferred with MIME type text/html: 
"http://localhost:7000/lib/bootstrap/boostrap.css"

來源

2016-04-14 MuffinTheKid

您是否嘗試將cdn版本複製到您的引導程序中。css –

你是什麼意思「如果我......提交我的本地副本，一切工作正常。」？ – kojow7

嘗試確認您使用的是本地CSS文件的正確路徑。 – frederickf

好消息

我想通了這個問題。問題源於我的服務器代碼。

下面是引用代碼

var express = require('express'); 
var path = require('path'); 
var app = express(); 
var rootPath = path.normalize(__dirname + '/../'); 

app.use(express.static(rootPath + '/app')); 

app.get('*', function(req, res) { res.sendFile(rootPath + 'client/app/core/index.html'); }); 

app.listen(8000); 
console.log('Listening on port 8000...');

的問題是在該行

app.use(express.static(rootPath + '/app');

它應該是

app.use(express.static(rootPath + 'client/app');

我沒有確保有路徑正確時爲css和js文件進行快速掃描。

道德故事，從不掩飾小細節。

來源

2016-04-14 20:14:02 MuffinTheKid

不要使用CDN，而不是從here獲得本地版本。這是由於簡單，速度和靈活性。所有你需要做的（這是我做的），是建立在根腳本，以更新使用CDN所有我的本地庫（見下文）

mkdir updateLib 
cd updateLib 
mkdir css 
mkdir js 
mkdir img 
cd css 

REM use Curl -O http://cdn.url here (you ust have cygwin installed) 

cd .. 
cd js 

REM use Curl -O http://cdn.url here (you ust have cygwin installed) 

cd .. 
cd .. 
copy lib/img/* updateLib/img 

rm -rfv lib 
REN updateLib lib 

msg %username% "libs updated!"

如果您的問題是使用CDN，這是一個解決方案也是如此。

來源

2016-04-14 18:57:25 RhysO

我的本地版本來自bootstrap站點。另外，我會試試這個。 – MuffinTheKid

@MuffinTheKid然後刪除CDN鏈接，並取消註釋您的本地。你也需要JS，並且我也建議CSS地圖（用於調試目的）。 – RhysO

做了所有這些，並且由於某種原因它仍然不起作用。 – MuffinTheKid

鏈接到Bootstrap的本地副本CSS

回答

相關問題