作为一位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(" rel="external nofollow" rel="external nofollow" ~/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> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @*<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet"> <script src="@Url.Content("~/js/bootstrap.js")"></script>*@ @Scripts.Render("~/bootstrap/js") @Styles.Render("~/bootstrap/css") </head> <body> <p> @*@RenderBody()*@ </p> </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> <compilation debug="false" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web>
固然你能够在Application_Start要领中设置BundleTable.EnableOptimizations = true来一样到达上述结果(它会override web.config中的设置,纵然debug属性为true)。
末了阅读网页,检察源代码,能够清晰看到打包文件的途径是之前定义过的相对途径,点击这个链接,阅读器为我们翻开了经由紧缩处置惩罚事后的打包文件,以下图所示:
小结
在这一章节中,简朴为人人梳理了Bootstrap的体系构造,然后如何在ASP.NET MVC项目中增加Bootstrap,末了运用了打包和紧缩手艺来完成对资本文件的打包,从而提高了网站的机能。
以上就是ASP.NET MVC 运用Bootstrap要领引见的细致内容,更多请关注ki4网别的相干文章!