使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)
来源:互联网 发布:微信群淘宝客机器人 编辑:程序博客网 时间:2024/04/30 15:27
用 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,
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」,
另外前面已经说过两次,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
- 使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)
- ASP.NET MVC 入门4:layout的使用
- 在ASP.NET MVC 4中使用TWITTER BOOTSTRAP
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
- ASP.NET MVC Bootstrap Helpers
- asp.net MVC 使用signalR +bootstrap 实现 progressBar
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
- ASP.NET MVC 4 - Layout and Section in Razor
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
- ASP.NET MVC 5 (三) VS使用NuGet安装Bootstrap与使用Bootstrap
- ASP.NET MVC+Bootstrap 实现短信验证
- ASP.NET MVC+bootstrap paginator分页
- ASP.NET MVC+EF6+Bootstrap开发框架
- ASP.NET MVC登陆界面(结合bootstrap)
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
- Java 学习 第三章 Java核心-继承与多态
- ANDROID L——Material Design详解(视图和阴影)
- struts2的优点
- poj1961--Period(KMP求最小循环节)
- 一个人的旅行 hdu 2066
- 使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)
- bluetooth LE HOGP profile的代码大致实现流程(HOGP+GATT)
- pat 1006
- Swift基础--ijkplayer编译
- struts2如何完成文件的上传
- Xcode及Mac快捷键大全
- ContentProvider(内容提供者)用法详解
- 【Spring.Framework】依赖管理, Logging
- hdu-oj 2516 取石子游戏 ( 博弈)