ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
2016-02-04 09:59
796 查看
阅读目录
Bootstrap结构介绍
在ASP.NET MVC 项目中添加Bootstrap文件
为网站创建Layout布局页
使用捆绑打包和压缩来提升网站性能
在Bootstrap项目中使用捆绑打包
测试打包和压缩
小结
作为一名Web开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows Form的开发者而言,更是难上加难。
正是由于这样的原因,Bootstrap诞生了。Twitter Bootstrap为开发者提供了丰富的CSS样式、组件、插件、响应式布局等。同时微软已经完全集成在ASP.NET MVC 模板中。
回到顶部
解压文件夹后,可以看到Bootstrap的文件分布结构如下,包含3个文件夹:
css
fonts
js
css文件夹中包含了4个.css文件和2个.map文件。我们只需要将bootstrap.css文件包含到项目里这样就能将Bootstrap应用到我们的页面中了。bootstrap.min.css即为上述css的压缩版本。
.map文件不必包含到项目里,你可以将其忽略。这些文件被用来作为调试符号(类似于Visual Studio中的.pdb文件),最终能让开发人员在线编辑预处理文件。
Bootstrap使用Font Awesome(一个字体文件包含了所有的字形图标,只为Bootstrap设计)来显示不同的图标和符号,fonts文件夹包含了4类的不同格式的字体文件:
Embedded OpenType (glyphicons-halflings-regular.eot)
Scalable Vector Graphics (glyphicons-halflings-regular.svg)
TrueType font (glyphicons-halflings-regular.ttf)
Web Open Font Format (glyphicons-halflings-regular.woff)
建议将所有的字体文件包含在你的Web应用程序中,因为这能让你的站点在不同的浏览器中显示正确的字体。
EOT字体格式文件需要IE9及以上浏览器支持,TTF是传统的旧字体格式文件,WOFF是从TTF中压缩得到的字体格式文件。如果你只需要支持IE8之后的浏览器、iOS 4以上版本、同时支持Android,那么你只需要包含WOFF字体即可。
js文件夹包含了3个文件,所有的Bootstrap插件被包含在boostrap.js文件中,bootstrap.min.js即上述js的压缩版本,npm.js通过项目构建工具Grunt自动生成。
在引用boostrap.js文件之前,请确保你已经引用了JQuery库因为所有的Bootstrap插件需要JQuery。
回到顶部
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/3b7a09851a37f06626858845391695a4.png)
说明微软对于Bootstrap是非常认可的,高度集成在Visual Studio中。
值得注意的是,在Scripts文件中添加了一个名为_references.js的文件,这是一个非常有用的功能,当我们在使用Bootstrap等一些前端库时,它可以帮助Visual Studio启用智能提示。
当然我们也可以创建一个空的ASP.NET MVC项目手动去添加这些依赖文件,正如下图所示这样,选择空的模板:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/69160468e04aa292024625b03a8ab52b.png)
对于新创建的空白ASP.NET MVC项目来说,没用Content,Fonts,Scripts文件夹——我们必须手动去创建他们,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/dff5eedeec0b0256fc1bd8410cf1fcae.png)
当然,也可以用Nuget来自动添加Bootstrap资源文件。如果使用图形界面来添加Bootstrap Nuget Package,则直接搜索Bootstrap即可;如果使用Package Manager Console来添加Bootstrap Nuget Package,则输入Install-Package bootstrap。
回到顶部
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/1f3f04e376593082ee1ba871885c7a9f.png)
在新创建的Layout布局页中,使用如下代码来引用Bootstrap资源文件。
<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<script src="@Url.Content("~/js/bootstrap.js")"></script>
其中使用 @Url.Content 会将虚拟或者相对路径转换为绝对路径,这样确保Bootstrap资源文件被引用。
新建一个名为Home的Controller,并且添加默认Index的视图,使其套用上述的Layout布局页面,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/2d071ef690d89378d4f1a39c7fc8f99d.png)
回到顶部
对于大多数现代浏览器访问一个主机名都有6个并发连接的极限,这意味着如果你在一张页面上引用了6个以上的CSS、JavaScript文件,浏览器一次只会下载6个文件。所以限制资源文件的个数是个好办法,真正意义上的使命必达,而不是浪费在加载资源上。
回到顶部
install-package Microsoft.AspNet.Web.Optimization 来安装Microsoft.AspNet.Web.Optimization NuGet package以及它依赖的Package,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/2be512566ee84d7f9ef820e85e5b04cc.png)
在安装完成后,在App_Start中添加 BundleConfig类:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
ScriptBundle和StyleBundle对象实例化时接受一个参数用来代表打包文件的虚拟路径,Include顾名思义将你需要的文件包含到其中。
然后在Application_Start方法中注册它:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
记住,不要去包含.min类型的文件到打包文件中,比如bootstrap.min.css、bootstrap.min.js,编译器会忽略这些文件因为他们已经被压缩过了。
在ASP.NET MVC 布局页使用@Styles.Render("~/bootstrap/css")、@Scripts.Render("~/bootstrap/js")来添加对打包文件的引用。
如果Visual Studio HTML编辑器表明无法找到Styles和Scripts对象,那就意味着你缺少了命名空间的引用,你可以手动在布局页的顶部添加System.Web.Optimization 命名空间,如下代码所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
当然为了通用性,最佳的实践是在Views文件夹的web.config中添加System.Web.Optimization名称空间的引用,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
回到顶部
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
当然你可以在Application_Start方法中设置BundleTable.EnableOptimizations = true来同样达到上述效果(它会override web.config中的设置,即使debug属性为true)。
最后浏览网页,查看源代码,可以清楚看到打包文件的路径是之前定义过的相对路径,点击这个链接,浏览器为我们打开了经过压缩处理过后的打包文件,如下图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/0669024ae79328cd8b7db8105f435b77.png)
回到顶部
在这一章节中,简单为大家梳理了Bootstrap的体系结构,然后怎样在ASP.NET MVC项目中添加Bootstrap,最后使用了打包和压缩技术来实现对资源文件的打包,从而提高了网站的性能。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201004/a5c9c6c48e975c59a242dd21e34c6c53.png)
本博客为木宛城主原创,基于Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名木宛城主(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
分类: ASP.NET MVC, Bootstrap
好文要顶 关注我 收藏该文联系我
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/d5aea86bdec32a66be1446dacc4efd84.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/0d5b76b4ae98cefd7c2d4300c27b1c69.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/06/14f42f07e1b4868c117f58f5b04ee140.png)
木宛城主 关注 - 0 粉丝 - 1116
荣誉:推荐博客
Bootstrap结构介绍
在ASP.NET MVC 项目中添加Bootstrap文件
为网站创建Layout布局页
使用捆绑打包和压缩来提升网站性能
在Bootstrap项目中使用捆绑打包
测试打包和压缩
小结
作为一名Web开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows Form的开发者而言,更是难上加难。
正是由于这样的原因,Bootstrap诞生了。Twitter Bootstrap为开发者提供了丰富的CSS样式、组件、插件、响应式布局等。同时微软已经完全集成在ASP.NET MVC 模板中。
回到顶部
Bootstrap结构介绍
你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap。解压文件夹后,可以看到Bootstrap的文件分布结构如下,包含3个文件夹:
css
fonts
js
css文件夹中包含了4个.css文件和2个.map文件。我们只需要将bootstrap.css文件包含到项目里这样就能将Bootstrap应用到我们的页面中了。bootstrap.min.css即为上述css的压缩版本。
.map文件不必包含到项目里,你可以将其忽略。这些文件被用来作为调试符号(类似于Visual Studio中的.pdb文件),最终能让开发人员在线编辑预处理文件。
Bootstrap使用Font Awesome(一个字体文件包含了所有的字形图标,只为Bootstrap设计)来显示不同的图标和符号,fonts文件夹包含了4类的不同格式的字体文件:
Embedded OpenType (glyphicons-halflings-regular.eot)
Scalable Vector Graphics (glyphicons-halflings-regular.svg)
TrueType font (glyphicons-halflings-regular.ttf)
Web Open Font Format (glyphicons-halflings-regular.woff)
建议将所有的字体文件包含在你的Web应用程序中,因为这能让你的站点在不同的浏览器中显示正确的字体。
EOT字体格式文件需要IE9及以上浏览器支持,TTF是传统的旧字体格式文件,WOFF是从TTF中压缩得到的字体格式文件。如果你只需要支持IE8之后的浏览器、iOS 4以上版本、同时支持Android,那么你只需要包含WOFF字体即可。
js文件夹包含了3个文件,所有的Bootstrap插件被包含在boostrap.js文件中,bootstrap.min.js即上述js的压缩版本,npm.js通过项目构建工具Grunt自动生成。
在引用boostrap.js文件之前,请确保你已经引用了JQuery库因为所有的Bootstrap插件需要JQuery。
回到顶部
在ASP.NET MVC 项目中添加Bootstrap文件
打开Visual Studio 2013,创建标准的ASP.NET MVC项目,默认情况下已经自动添加了Bootstrap的所有文件,如下所示:![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/3b7a09851a37f06626858845391695a4.png)
说明微软对于Bootstrap是非常认可的,高度集成在Visual Studio中。
值得注意的是,在Scripts文件中添加了一个名为_references.js的文件,这是一个非常有用的功能,当我们在使用Bootstrap等一些前端库时,它可以帮助Visual Studio启用智能提示。
当然我们也可以创建一个空的ASP.NET MVC项目手动去添加这些依赖文件,正如下图所示这样,选择空的模板:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/69160468e04aa292024625b03a8ab52b.png)
对于新创建的空白ASP.NET MVC项目来说,没用Content,Fonts,Scripts文件夹——我们必须手动去创建他们,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/dff5eedeec0b0256fc1bd8410cf1fcae.png)
当然,也可以用Nuget来自动添加Bootstrap资源文件。如果使用图形界面来添加Bootstrap Nuget Package,则直接搜索Bootstrap即可;如果使用Package Manager Console来添加Bootstrap Nuget Package,则输入Install-Package bootstrap。
回到顶部
为网站创建Layout布局页
为了让我们的网站保持一致的风格,我将使用Bootstrap来构建Layout布局页。在Views文件夹创建MVC Layout Page(Razor)布局文件,如下图所示:![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/1f3f04e376593082ee1ba871885c7a9f.png)
在新创建的Layout布局页中,使用如下代码来引用Bootstrap资源文件。
<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<script src="@Url.Content("~/js/bootstrap.js")"></script>
其中使用 @Url.Content 会将虚拟或者相对路径转换为绝对路径,这样确保Bootstrap资源文件被引用。
新建一个名为Home的Controller,并且添加默认Index的视图,使其套用上述的Layout布局页面,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/2d071ef690d89378d4f1a39c7fc8f99d.png)
回到顶部
使用捆绑打包和压缩来提升网站性能
捆绑打包(bundling)和压缩(minification)是ASP.NET中的一项新功能,允许你提升网站加载速度,这是通过限制请求CSS和JavaScript文件的次数来完成的。本质上是将这类文件结合到一个大文件以及删除所有不必要的字符(比如:注释、空格、换行)。对于大多数现代浏览器访问一个主机名都有6个并发连接的极限,这意味着如果你在一张页面上引用了6个以上的CSS、JavaScript文件,浏览器一次只会下载6个文件。所以限制资源文件的个数是个好办法,真正意义上的使命必达,而不是浪费在加载资源上。
回到顶部
在Bootstrap项目中使用捆绑打包
因为我们创建的是空的ASP.NET MVC项目,所以并没有自动引用与打包相关的程序集。打开Nuget Package Manager Console来完成对Package的安装,使用如下PowerShell命令:install-package Microsoft.AspNet.Web.Optimization 来安装Microsoft.AspNet.Web.Optimization NuGet package以及它依赖的Package,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/2be512566ee84d7f9ef820e85e5b04cc.png)
在安装完成后,在App_Start中添加 BundleConfig类:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bootstrap/js").Include( "~/js/bootstrap.js", "~/js/site.js")); bundles.Add(new StyleBundle("~/bootstrap/css").Include( "~/css/bootstrap.css", "~/css/site.css")); }
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
ScriptBundle和StyleBundle对象实例化时接受一个参数用来代表打包文件的虚拟路径,Include顾名思义将你需要的文件包含到其中。
然后在Application_Start方法中注册它:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); BundleTable.EnableOptimizations = true; }
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
记住,不要去包含.min类型的文件到打包文件中,比如bootstrap.min.css、bootstrap.min.js,编译器会忽略这些文件因为他们已经被压缩过了。
在ASP.NET MVC 布局页使用@Styles.Render("~/bootstrap/css")、@Scripts.Render("~/bootstrap/js")来添加对打包文件的引用。
如果Visual Studio HTML编辑器表明无法找到Styles和Scripts对象,那就意味着你缺少了命名空间的引用,你可以手动在布局页的顶部添加System.Web.Optimization 命名空间,如下代码所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
@using System.Web.Optimization <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @*<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet"> <script src="@Url.Content("~/js/bootstrap.js")"></script>*@ @Scripts.Render("~/bootstrap/js") @Styles.Render("~/bootstrap/css") </head> <body> <div> @*@RenderBody()*@ </div> </body> </html>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
当然为了通用性,最佳的实践是在Views文件夹的web.config中添加System.Web.Optimization名称空间的引用,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
<namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="Bootstrap.Web" /> <add namespace="System.Web.Optimization" /> </namespaces>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
回到顶部
测试打包和压缩
为了使用打包和压缩,打开网站根目录下的web.config文件,并且更改compilation元素的dubug属性为false,即为release。![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
<system.web> <compilation debug="false" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
当然你可以在Application_Start方法中设置BundleTable.EnableOptimizations = true来同样达到上述效果(它会override web.config中的设置,即使debug属性为true)。
最后浏览网页,查看源代码,可以清楚看到打包文件的路径是之前定义过的相对路径,点击这个链接,浏览器为我们打开了经过压缩处理过后的打包文件,如下图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/0669024ae79328cd8b7db8105f435b77.png)
回到顶部
小结
在这一章节中,简单为大家梳理了Bootstrap的体系结构,然后怎样在ASP.NET MVC项目中添加Bootstrap,最后使用了打包和压缩技术来实现对资源文件的打包,从而提高了网站的性能。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201004/a5c9c6c48e975c59a242dd21e34c6c53.png)
本博客为木宛城主原创,基于Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名木宛城主(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
分类: ASP.NET MVC, Bootstrap
好文要顶 关注我 收藏该文联系我
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/d5aea86bdec32a66be1446dacc4efd84.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/0d5b76b4ae98cefd7c2d4300c27b1c69.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/06/14f42f07e1b4868c117f58f5b04ee140.png)
木宛城主 关注 - 0 粉丝 - 1116
荣誉:推荐博客
相关文章推荐
- BootStrap main 方法都做了什么?
- Bootstrap
- 让Bootstrap 3兼容IE8浏览器
- bootStrap ace tree例子 JAVA版本
- bootstrap table 整合dwr框架
- Bootstrap快速上手(一)----右键菜单
- Bootstrap使用模态框
- Slickflow.NET 开源工作流引擎基础介绍(三) -- 基于HTML5/Bootstrap的Web流程设计器
- Bootstrap
- 【正完成】Strust2和Bootstrap、mybatis_mysql学习笔记
- js 重写 bootstrap 样式 alert/confirm 消息窗口
- thinkphp整合bootstrap分页
- bootstrap
- ui-bootstrap-tpls 中文 现在还不全的啊~,组件太多了,有空就更新
- JS组件Bootstrap Table使用方法详解
- build.gradle warning: spring boot gradle bootstrap class path not set ...
- JS表格组件神器bootstrap table详解(基础版)
- JS组件Bootstrap Table使用方法详解
- 基于bootstrap pagination 的分页组件
- 推荐一个不错的bootstrap学习网站