2013年9月11日 星期三

使用 ASP.NET MVC 4 Bootstrap Layout Template (VS2012)

使用 Bootstrap 有一段時間也已經實際用在好幾個專案,在之前剛結束的「twMVC - Workshop #1」裡帶著學員實作的專案也是使用 Bootstrap,Bootstrap 不久前也已經推進到了 3.0 版本,而 VS2013 裡所建立的 ASP.NET 專案(新版 ASP.NET)不管是 WebForm 還是 MVC 都已經將專案範本使用 Bootstrap 了,雖然目前在 VS2013 RC 所建立的 ASP.NET 網站範本所使用的 Bootstrap  為 2.3.1 版,不過在 VS2013 的正式發佈版本會在專案範本裡使用 Bootstrap 3.0。

而在 VS2012 開發網站時,如果要在網站裡加入 Bootstrap,除非我們所拿到的網站 prototype 是已經加入了 Bootstrap,不然就是需要我們動手去做,而網路上大多都是介紹如何在一個已經建立好的網站專案裡透過 NuGet 加入 Bootstrap,這樣的方式也是可以,但如果一開始建立好的網站範本就如同開發 ASP.NET MVC 5 那樣,已經套用好 Bootstrap 的 Project Template,這樣子就會方便了。

接下來就跟大家簡單說明使用「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」。

 


2013-10-15 更新:

目前作者「Hans Wolff」已將「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」與「ASP.NET MVC 4 Bootstrap Layout Template (VS2013)」從 Visual Studio Gallery 上給移除了,所以現在無法從 Visual Studio 的「擴充功能和更新」裡安裝,可以改使用另一個 Extensions「Bootstrap3 For Mvc4」,這邊有文章介紹「Visual Studio Extensions - Bootstrap3 For Mvc4」。

 

 

在進入主題之前,先跟各位說明一下 VS2013 RC 所建立的 ASP.NET MVC 網站,

image

預設所建立的網站使用的 Bootstrap 版本為「2.3.1」

image

執行後的網站內容

image

 

可以透過 NuGet 將 Bootstrap 版本更新到 3.0

image

image

image

執行後的網站內容

image

這邊所看到的是網站改用 Bootstrap 3.0 的樣子,因為 Project Template 原本是使用 2.3.1,所以套用 3.0 之後所呈現的網頁就會看起來怪怪的,不過一開始就有說過,在 VS2013 最後的正式版本發佈時,Project Template 將會修改為使用 Bootstrap 3.0。

 


前面是講有關 VS2013 裡新的 Project Template,然而一般我們在 VS2012 或是在 VS2013 使用 VS2012 的 ASP.NET MVC 開發網站時,預設的 Project Template 是 ASP.NET MVC 4 專案範本,在這個範本裡要使用 Bootstrap 就必須手動加入,

VS2012

image

VS2013 RC - 開發 VS2012 ASP.NET MVC 4 Web 應用程式

image

 

其實我們可以在建立網站的時候可以選擇「線上 > 範本」並且搜尋「Bootstrap」,然後在搜尋出來範本裡選擇使用「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」,

image

為何不是選用第一個「ASP.NET MVC 4 with Bootstrap Layout」呢?其實兩個 Template 都是同一個作者,只不過「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」的版本比較新,而且也比要多人使用,

選擇專案的範本後就可以建立專案,此時就會立即下載範本所需的檔案,當看到以下的「VSIX 安裝程式」視窗就選擇確定安裝「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」擴充功能,

image

安裝擴充功能後就可以看到 VS2012 開始建立專案,最後就可以看到建立好的專案內容,

image

image

執行後的網站顯示頁面

image

image

就如同我們使用預設的網站專案範本一樣,只有基本的支架而已。

此外在剛才從線上範本並建立專案時有安裝一個「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」擴充功能,可以在「工具 > 擴充功能和更新」裡看到這一個 Extensions,

image

這樣我們下次要重新建立一個 MVC 網站專案時,可以不必再從線上範本裡去安裝這個 Project Template,可以直接在「加入新專案 > 已安裝的 > Visual C#」裡選用「ASP.NET MVC 4 with Bootstrap Layout」這個 Project Template,

image

 

Visual Studio 元件庫 - ASP.NET MVC 4 Bootstrap Layout Template (VS2012) 擴充功能

http://visualstudiogallery.msdn.microsoft.com/addff204-d297-4f29-9bc4-36256e00c08d

image

在問答集裡已經有人請作者也做個 Bootstrap 3.0 的版本了。

 

在安裝擴充功能時會依據 Visual Studio 版本做篩選,所以就會有另一個給 VS2013 的版本「ASP.NET MVC 4 Bootstrap Layout Template (VS2013)」,這個版本是要給在 VS2013 裡開發 Visual Studio 2012 的 ASP.NET MVC 應用程式所用的。

Visual Studio 元件庫 - ASP.NET MVC 4 Bootstrap Layout Template (VS2013) 擴充功能

http://visualstudiogallery.msdn.microsoft.com/51802f1f-adac-49ea-a358-5b16f24abd55

在 VS2013 RC 裡可以先透過「工具 > 擴充功能和更新」安裝「ASP,NET MVC 4 Bootstrap Layout Template (VS2013)」,

image

接著在「新增專案」裡並不是去選擇「Web > Visual Studio 2012 > ASP.NET MVC 4 Web 應用程式」,而是要在「已安裝的 > 範本 > Visual C#」下去選擇「ASP.NET MVC 4 with Bootstrap Layout」,

image

image

選擇此專案範本所建立的網站專案就跟在 VS2012 選擇同樣範本所建立的是一樣的。

 


另外如果不想用這樣的方式建立專案,還是習慣用預設的 Project Template 建立專案,然後手動加入 Bootstrap 的話,可以參考「點部落 - 程式宅急便」由 Kyle Shen 所寫的文章:

[ASP.NET MVC]新增一個ASP.NET MVC 4的Twitter Bootstrap專案!

選取空白 Project Template 建立 ASP.NET MVC 4 專案,然後在專案裡透過 NuGet 加入「Twitter Bootstrap for ASP.NET MVC 4」與「Twitter Bootstrap for ASP.NET MVC 4 Sample」,

image

可以透過這樣的方式為專案加入 Bootstrap。

 

另外前面已經說過兩次,VS2013 最後的正式版本會在 Project Template 改用 Bootstrap 3.0,所以各位開發者朋友們,不管以前有沒有使用 Bootstrap 的經驗,學習 Bootstrap 3.0 的腳步要加快囉!

Bootstrap (V3.0.0)

Bootstrap GitHub Repository

Bootstrap - Examples

 

另外目前使用 Bootstrap 2.3.2 的還是佔絕大多數,而且周邊的一些第三方套件也還沒有推出適應 3.0 的版本,所以還是要持續關注 Bootstrap 2.3.2,

Bootstrap (V2.3.2)

另外由微軟 MVP - KKBruce 陳傳興所建立的 Bootstrap 中文教學網站也是不能錯過的喔!

Bootstrap V2中文教學 - KKBruce

 

以上

沒有留言:

張貼留言

提醒

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

最近的留言