ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
阅读目录
- 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的所有文件,如下所示:
说明微软对于Bootstrap是非常认可的,高度集成在Visual Studio中。
值得注意的是,在Scripts文件中添加了一个名为_references.js的文件,这是一个非常有用的功能,当我们在使用Bootstrap等一些前端库时,它可以帮助Visual Studio启用智能提示。
当然我们也可以创建一个空的ASP.NET MVC项目手动去添加这些依赖文件,正如下图所示这样,选择空的模板:
对于新创建的空白ASP.NET MVC项目来说,没用Content,Fonts,Scripts文件夹——我们必须手动去创建他们,如下所示:
当然,也可以用Nuget来自动添加Bootstrap资源文件。如果使用图形界面来添加Bootstrap Nuget Package,则直接搜索Bootstrap即可;如果使用Package Manager Console来添加Bootstrap Nuget Package,则输入Install-Package bootstrap。
为网站创建Layout布局页
为了让我们的网站保持一致的风格,我将使用Bootstrap来构建Layout布局页。在Views文件夹创建MVC Layout Page(Razor)布局文件,如下图所示:
在新创建的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布局页面,如下所示:
使用捆绑打包和压缩来提升网站性能
捆绑打包(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,如下所示:
在安装完成后,在App_Start中添加 BundleConfig类:
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")); }
ScriptBundle和StyleBundle对象实例化时接受一个参数用来代表打包文件的虚拟路径,Include顾名思义将你需要的文件包含到其中。
然后在Application_Start方法中注册它:
protected void Application_Start() {AreaRegistration.RegisterAllAreas();RouteConfig.RegisterRoutes(RouteTable.Routes);BundleConfig.RegisterBundles(BundleTable.Bundles);BundleTable.EnableOptimizations = true; }
记住,不要去包含.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 命名空间,如下代码所示:
@using System.Web.Optimization <!DOCTYPE html> <html> <head> <metaname="viewport"content="width=device-width" /> <title>@ViewBag.Title</title>@*<linkhref="@Url.Content("~/css/bootstrap.css")" rel="stylesheet"> <scriptsrc="@Url.Content("~/js/bootstrap.js")"></script>*@@Scripts.Render("~/bootstrap/js")@Styles.Render("~/bootstrap/css") </head> <body> <div>@*@RenderBody()*@ </div> </body> </html>
当然为了通用性,最佳的实践是在Views文件夹的web.config中添加System.Web.Optimization名称空间的引用,如下所示:
<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>
测试打包和压缩
为了使用打包和压缩,打开网站根目录下的web.config文件,并且更改compilation元素的dubug属性为false,即为release。
<system.web><compilationdebug="false"targetFramework="4.5" /><httpRuntimetargetFramework="4.5" /></system.web>
当然你可以在Application_Start方法中设置BundleTable.EnableOptimizations = true来同样达到上述效果(它会override web.config中的设置,即使debug属性为true)。
最后浏览网页,查看源代码,可以清楚看到打包文件的路径是之前定义过的相对路径,点击这个链接,浏览器为我们打开了经过压缩处理过后的打包文件,如下图所示:
小结
在这一章节中,简单为大家梳理了Bootstrap的体系结构,然后怎样在ASP.NET MVC项目中添加Bootstrap,最后使用了打包和压缩技术来实现对资源文件的打包,从而提高了网站的性能。
ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap相关推荐
- [导入]ASP.NET MVC框架开发系列课程(3):URL导向.zip(16.66 MB)
讲座内容: ASP.NET MVC框架中一个关键特性就是基于URL的导向.本次课程将讲解URL Routing机制的使用. 课程讲师: 赵劼 MSDN特邀讲师 赵劼(网名"老赵". ...
- [导入]ASP.NET MVC框架开发系列课程(2):一个简单的ASP.NET MVC应用程序.zip(13.70 MB)...
讲座内容: 使用ASP.NET MVC框架进行开发与ASP.NET WebForms截然不同.本次课程将通过官方的示例程序简单了解一下ASP.NET MVC应用程序的结构与特点. 课程讲师: 赵劼 M ...
- [导入]ASP.NET MVC框架开发系列课程(1):MVC模式与ASP.NET MVC框架概述.zip(8.80 MB)
讲座内容: ASP.NET MVC框架是既ASP.NET WebForms后的又一种开发方式.它提供了一系列优秀特性,使ASP.NET开发人员拥有了另一个选择.本次课程将对MVC模式ASP.NET M ...
- ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素
ASP.NET MVC使用Bootstrap系统(2)--使用Bootstrap CSS和HTML元素 阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Boots ...
- ASP.NET MVC 入门系列教程
一个居于ASP.NET MVC Beta的系列入门文章,有朋友提议说写一个示例程序来同步讲解,那样更加容易学习.所以就写选择了写一个Blog程序来作为示例程序.(原来是居于ASP.NET MVC Pr ...
- ASP.NET MVC实用技术:开篇
ASP.NET MVC是一款基于ASP.NET的MVC模式的实现框架.通过使用ASP.NET MVC框架,开发人员能够非常方便地完成应用程序前台页面的开发工作.优秀的前台展示,对于大型企业级应用而言, ...
- asp.net 报表页面模板_Stimulsoft ASP.NET MVC报表教程:在设计器中保存报表模板
Stimulsoft Reports.Net最新版下载:https://www.evget.com/product/1071/download 本示例说明如何加载报表模板并在设计器中对其进行编辑. 首 ...
- Asp.net MVC 教程汇总
自学MVC看这里--全网最全ASP.NET MVC 教程汇总 MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想 ...
- ASP.NET MVC 教程学习
1. Why :为什么需要ASP.NET MVC 本章主要为大家汇总了为什么学习Asp.net MVC替代WebForms,产生ASP.NET MVC 的需求是什么,只有更好的理解了为什么需要MVC, ...
- ASP.NET MVC 入门
入门基础 ASP.NET MVC 是微软系列基于 C# 语言的 Web 开发框架,并不适合 0 基础入门,在学习之前你必须要了解 4 个知识点: 1.HTML 基础.网页的基本标签,结合 ASP.NE ...
最新文章
- Spring注解创建Bean的几种方式
- 安卓点击图片跳转界面_安卓手机APP控制无线开关的电路方案设计(原理图+源码)...
- mysql主键重复会覆盖还是_mysql如果主键重复了会发生什么情况
- JeeWx 捷微二代微信活动平台1.0发布!活动插件持续开源更新!
- 201521123063 《Java程序设计》 第7周学习总结
- Spring对不同来源的Resources的支持
- map.addoverlay php,覆盖物 - 百度地图开发文档 - php中文网手册
- POJ 3734 Blocks 矩阵递推
- shell编程基础:逻辑运算
- SAP License:转一篇初学者必看的文章
- 中等职业教育计算机,计算机应用基础:Windows7+Office2010(中等职业教育规划教材)...
- linux 权限分割,sudo使用之实现权限分配
- Eclipse RCP中Viewer交互的三种方式/Make your Eclipse applications richer with view linking
- 计算机网络物理层之信道复用技术
- Java 对象数组的定义与用法详解
- messagedigest 图片加密_Java中MessageDigest来实现数据加密的方法
- 爱立信 电话面试 java_电话面试爱立信
- 快来,女神节已过,这边的大奖还没人领~【每一个女性都值得被赞美】 ——用ADC制奖状,赢大奖
- 报错:/ma.jsp (line: [1], column: [45]) The JSP specification requires that an attribute name is preced
- JavaScript 设计模式之-单例模式(Singleton Pattern)
热门文章
- CNN数玉米穗--TasselNet: Counting maize tassels in the wild via local counts regression network
- 在centos上通过yum直接安装最新版gcc和开发工具
- Redis报错解决:RDB: 0 MB of memory used by copy-on-write
- mysql中日志的特点_mysqlbinlog的日志类型
- java jms过时了么_JMS Message正在从Hibernate获取过时的数据
- C++_泛型编程与标准库(三)
- C++——新类型与原始字面量(原始字符串)
- hp服务器维护开关,HP服务器开机无显维修案例
- pandas 排序 给excel_懂Excel轻松入门Python数据分析包pandas(二十五):循环序列分组...
- 基于 python + WebDriverAgent 的“跳一跳”小程序高分教程