如何一起使用Twitter Bootstrap，MVC和Visual Studio？

我開始嘗試Bootstrap。我已經下載了無點擴展名，但我對接下來要做什麼感到困惑。看看引導文件，我看到很多.less文件。有人可以解釋我應該在MVC文件夾結構中放置哪些內容，以及如何設置應用程序，以便在更改顏色變量時更改我的.css文件。如何一起使用Twitter Bootstrap，MVC和Visual Studio？

更新

至於建議我放置所有.LESS文件在同一目錄作爲我的CSS。

但是接下來我該怎麼辦？我試圖查看URL

http://127.255.0.0:82/Content/Stylesheets/bootstrap.less

在我的瀏覽器，但得到了以下信息：

( 

Expected '}' but found '~' on line 522 in file 'mixins.less': 
[521]:  .spanX (@index) when (@index > 0) { 
[522]:  (~"[email protected]{index}") { .span(@index); } 
     ------^ 
[523]:  .spanX(@index - 1);

來源

2012-03-21 Jessica

無論你的css文件存儲在哪裏？無點網站在側欄上有說明如何使其全部工作的說明。 – tkone 2012-03-21 03:30:29

謝謝。我會嘗試一下，看看它是否工作正常。 – Jessica 2012-03-21 03:32:52

我試了一下，但我不知道如何獲得最新的編譯。看到我下面的評論。謝謝J – Jessica 2012-03-21 04:41:10

這是無點的已知問題：
https://github.com/dotless/dotless/issues/155

基本上引導的源代碼使用您使用的Dotless版本尚不支持的LESS功能。雖然最新的源代碼中顯然已經添加了支持，所以你應該可以通過編譯最新源代碼的Dotless來解決這個問題。

下載並引用dotless.Core.dll是不夠的，因爲二進制文件並不是最新的，即它們不包含Bootstrap所需的最新功能。只有源文件包含最新的更改，因此您必須通過使用Visual Studio編譯最新源代碼來生成dotless.Core.dll。當然，這些功能在下次決定更新時會包含在.dll下載中。

Dotless生成結果文件bootstrap.css「實時」。你永遠不會在磁盤上看到這個文件，因爲它是在通過HTTP請求時編譯.less文件而產生的。生產的CSS只緩存在內存中。但是，您始終可以在瀏覽器中請求.less文件，並將所見到的內容保存到.css文件中。如果你的Dotless安裝工作正常的話，這樣做可以工作，但沒有多少意義。但是，如果您要的只是一個包含自定義值的bootstrap.css文件，那麼您也可以在Bootstrap網站上使用online tool這個online tool。它可以讓你改變變量值並下載結果CSS。

來源

2012-03-21 04:08:19

我可以保證此解決方案在我昨晚試用時能夠正常工作。但是，如果您不想使用無點號，則可以使用javascript less編譯器（http://www.lesscss.org）。儘管在服務器上編譯/解析它是一個好主意。 – 2012-03-21 04:13:43

我是否需要實際編譯無點區域，或者我可以只獲取dotless.Core.dll並將其移入我參考的VS2010程序包目錄中？ – Jessica 2012-03-21 04:31:53

對不起，但我還有另外一個問題，除了我的問題，我需要編譯（上面）。我認爲最終結果是我需要創建：bootstrap.css和bootstrap-responsive.css。我需要做些什麼才能確保創建這些文件？ – Jessica 2012-03-21 04:40:18

我目前編譯與nodejs構建較少的文件。您需要安裝node.js。

安裝完成後，在命令提示符下鍵入：「npm install less -g」，這會安裝最新的全局更少（全局最後的-g）。

在Visual Studio中，選擇Build在網站屬性頁活動，並把在「預生成事件命令行」類似如下：

lessc $（SolutionDir）路徑到主less- file.less> $（SolutionDir）path-to-where-css-is-output.css -x

編輯：Bootstrap現在使用Recess和npm命令已更改as seen here。

對我來說很容易，這是我的第一篇文章！:)

來源

2012-03-21 10:45:10 FIR55TORM

你試過Mindscap Web Workbench？

他們有一個article on how to set it up用於Twitter Bootstrap。

來源

2012-05-31 02:52:41 aboy021

您可以使用Combres與我的無點插件here。所有你需要做的就是引用bootstrap.less，並且所有的導入都可以使用乾淨的Bootstrap少的文件。 Combres將構建並緩存引導文件，甚至將其與其他非Bootstrap css文件進行壓縮。這是理想的設置。

http://pknopf.com/blog/using-less-correctly-with-combres

來源

2012-07-31 23:08:08

如何一起使用Twitter Bootstrap，MVC和Visual Studio？

回答

相關問題