使用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)」。

在进入主题之前，先跟各位说明一下 VS2013 RC 所建立的 ASP.NET MVC 网站，

 

预设所建立的网站使用的 Bootstrap 版本为「2.3.1」

 

 

执行后的网站内容

 

 

可以透过 NuGet 将 Bootstrap 版本更新到 3.0

 

 

 

执行后的网站内容

 

 

这边所看到的是网站改用 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

 

VS2013 RC - 开发 VS2012 ASP.NET MVC 4 Web 应用程序

 

 

其实我们可以在建立网站的时候可以选择「在线 > 模板」并且搜寻「Bootstrap」，然后在搜寻出来模板里选择使用「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」，

 

 

为何不是选用第一个「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)」扩充功能，

 

 

安装扩充功能后就可以看到 VS2012 开始建立项目，最后就可以看到建立好的项目内容，

 

 

执行后的网站显示页面

 

 

就如同我们使用预设的网站项目模板一样，只有基本的支架而已。

此外在刚才从在线模板并建立项目时有安装一个「ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」扩充功能，可以在「工具 > 扩充功能和更新」里看到这一个 Extensions，www.it165.net

 

 

这样我们下次要重新建立一个 MVC 网站项目时，可以不必再从在线模板里去安装这个 Project Template，可以直接在「加入新项目 > 已安装的 > Visual C#」里选用「ASP.NET MVC 4 with Bootstrap Layout」这个 Project Template，

 

 

Visual Studio 组件库 - ASP.NET MVC 4 Bootstrap Layout Template (VS2012) 扩充功能
http://visualstudiogallery.msdn.microsoft.com/addff204-d297-4f29-9bc4-36256e00c08d
 

 

在问答集里已经有人请作者也做个 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)」，
 

 

接着在「新增项目」里并不是去选择「Web > Visual Studio 2012 > ASP.NET MVC 4 Web 应用程序」，而是要在「已安装的 > 模板 > Visual C#」下去选择「ASP.NET MVC 4 with Bootstrap Layout」，

 

 

 

选择此项目模板所建立的网站项目就跟在 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」，

 

以透过这样的方式为项目加入 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