2013年10月2日 星期三

Visual Studio Extensions - Bootstrap3 For Mvc4

之前曾經為大家介紹了「使用 ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」,透過 Visual Studio 擴充功能安裝建立好的專案範本,讓我們可以用快速方便的方式來建立一個已有 Bootstrap 2.3.2 的 ASP.NET MVC 網站專案。

而 Bootstrap 3 已經在不久前正式 Release 了,再加上即將在本月正式發佈的 Visual Studio 2013,其中新版ASP.NET 專案的預設範本也會使用 Bootstrap 3, VS2012 or VS2010 開發 ASP.NET MVC 4 專案時如果要使用 Bootstrap 3 就需要自己動手處理,而不久前有位中東地區的網友在 Visual Studio Gallery 釋出了 Bootstrap3 For Mvc4 與 Bootstrap3 For Mvc4 VS2010,讓我們可以在安裝擴充套件之後就可以建立 Bootstrap3 的 ASP.NET MVC 4 網站。

 


Bootstrap3 For Mvc4

http://visualstudiogallery.msdn.microsoft.com/bb113b28-f193-414e-bb2e-47ad72adb346

for Visual Studio 2012

最近更新日期:2013-09-29

image

Bootstrap4 For Mvc4 VS2010

http://visualstudiogallery.msdn.microsoft.com/7ab7115f-826d-46d1-a5af-fe164b4282e1

最近更新日期:2013-09-14

image

 

Visual Studio 2012 安裝與使用

「工具  > 擴充功能和更新」,在「擴充功能與更新」裡查詢 Bootstrap3 For Mvc4,下載並安裝「Bootstrap3 For Mvc4」,

image

image

安裝完成之後不需重新開啟 VS2012,於新增專案的選擇範本裡就可以看到剛剛加入的「Bootstrap3 For Mvc4」,不過記得是在 Visual C# 項目裡而不是在 Visual C# > Web 項目裡,

image

P.S. 這個「Bootstrap For Mvc4」只有提供 C# 版本,沒有提供 Visual Basic 版本。

 

使用 Bootstrap3 For Mvc4 所建立的專案內容,如下:

image

image

image

「Bootstrap3 For Mvc4」包含了 Carousel 的實作,

image

網站執行結果:

image

 

更換樣式

現在 Bootswatch  的 Free themes 已經更新為 Bootstrap 3,

Bootswatch

http://bootswatch.com/

image

如果想要找以前 Bootstrap 2 的話,可透過以下連結前往,

http://bootswatch.com/2/

image

 

回到 Bootswatch 的 Bootstrap3 版本上,我們要更換 Bootstrap3 For Mvc4 網站原本的預設樣式,這邊就選擇放在第一個的 Amelia 這個樣式,

image

點選 Download,然後下載「bootstrap.css」

image

然後將 bootstrap.css 全選並複製,

image

回到 VS2012 並且開啟 ~/Content/bootstrap.css

image

接著把剛才所複製的 Amelia 版本的 bootstrap.css 內容貼到 ~/Content/bootstrap.css 裡,全部覆蓋貼上之後還有個動作要處理,從 Bootswatch 複製的樣式,裡面的 fonts 路徑是指向網站根目錄下,

image

而 Bootstrap3 For Mvc4 專案範本把 fonts 目錄是放到 ~/Content 下,

image

所 bootstrap.css 內容,將「~/fonts/」修改為「~/Content/fonts/」

image

image

 

以上步驟都完成之後,重新執行網站,就可以看到網站樣式已經改為 Amelia 樣式,

image

 


之前有許多 Bootstrap 相關的套件已經逐漸改為 Bootstrap 3,版本的更迭是在所難免,而我們就是要加快腳步跟上去,前幾天在 Facebook 上看到有人分享中國那邊有人所整理翻譯的 Bootstrap 3 文檔,對於許多開發人員而言,看看簡體版的文檔會比看英文的文檔要來得容易瞭解一些,

Bootstrap3 中文文檔

http://v3.bootcss.com/

Bootstrap 中文網除了 Bootstrap3 中文文檔外,也有提供 Bootstrap2 的中文文檔,以及 Bootstrap 相關套件的中文文檔,可以好好利用,

Bootstrap 中文網

http://www.bootcss.com/

 

不過我這邊還是比較建議台灣的開發人員可以前往微軟 MVP – Bruce Chen 所建立的 Bootstrap 正體中文網站,

Bootstrap 正體中文教學文件

http://kkbruce.tw/

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。