2017-06-17 67 views
0

我正在通過Adam Freeman的Pro ASP.Net Core MVC書中的Sports Store應用程序。在接近尾聲的第8章中,他開始添加一些帶引導的風格。bootstrap在Visual Studio 2015中使用bower下載時不起作用

第1步:添加bower.json文件,並添加引導依賴性:

{ 
    "name": "asp.net", 
    "private": true, 
    "dependencies": { 
    "bootstrap": "3.3.7" 
    } 
} 

第2步:添加此行到您的佈局:

<link rel="stylesheet" asp-href-include="lib/bootstrap/dist/css/*.min.css" /> 

現在整個佈局的代碼如下所示:

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <link rel="stylesheet" asp-href-include="lib/bootstrap/dist/css/*.min.css" /> 
    <title>SportsStore</title> 
</head> 
<body> 
    <div class="navbar navbar-inverse" role="navigation"> 
     <a class="navbar-brand" href="#">SPORTS STORE</a> 
    </div> 
    <div class="row panel"> 
     <div id="categories" class="col-xs-3"> 
      Put something useful here later 
     </div> 
     <div class="col-xs-8"> 
      @RenderBody() 
     </div> 
    </div> 
</body> 
</html> 

現在,如果我檢查HTML我可以看到bootstap文件被拉:

<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap-grid.min.css"> 
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap-reboot.min.css"> 
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css"> 

所以現在在這一點上,如果我運行代碼,我應該看到體育用品店標題黑色導航欄在白色所有與自舉導航欄樣式。 此外,在渲染主體中還有一個以自舉井樣式顯示的產品清單。

而通常的左邊距不起作用。

無法使引導樣式生效。

任何人都有任何想法,爲什麼這是如此艱難的引導來產生影響?

更新1: 嗯,我認爲鬼混我改變了依賴3.3.6。 它沒有清理3.3.7所以我有兩個文件夾:

1)www/lib/bootstrap。

2)WWW/lib目錄/引導,CSS

如果我指向引導,CSS一切似乎工作。

這幾乎是如何在我自己的項目中。 我可以使用鮑爾幾乎任何依賴如角度。 但我有bootstrap的麻煩。

基本上我一直在新的文件安排之前下載一個老版本的引導程序,並手動放在www/lib/bootstrap下。

我對客戶端工具和構建客戶端庫等非常糟糕和無知。 我錯過了一步嗎?

回答

0

從「Pro ASP.Net Core MVC」書中編寫此應用程序時,我遇到了與Bootstrap相同的問題。我的解決辦法取代:

<link rel="stylesheet" asp-href-include="lib/bootstrap/dist/css/*.min.css" /> 

有了這個:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

_Layout.cshtml文件。

請注意,這不是最新版本。我使用本書中的相同版本(3.3.6)來使應用外觀與本書完全相同。

相關問題