作为一名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>
<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>

当然为了通用性,最佳的实践是在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,最后使用了打包和压缩技术来实现对资源文件的打包,从而提高了网站的性能。

本博客为木宛城主原创,基于Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名木宛城主(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
 

ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap的更多相关文章

  1. Asp.net Mvc模块化开发系列(目录)

    模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...

  2. ASP.NET MVC框架开发系列课程 (webcast视频下载)

    课程讲师: 赵劼 MSDN特邀讲师 赵劼(网名“老赵”.英文名“Jeffrey Zhao”,技术博客为http://jeffreyzhao.cnblogs.com),微软最有价值专家(ASP.NET ...

  3. 开篇ASP.NET MVC 权限管理系列

    开篇 [快乐编程系列之ASP.NET MVC 权限管理系列]一.开篇   用了好长一段时间的ASP.NET MVC,感觉MVC真的是很好用,最近一年左右做了两个中小型项目,觉得还是很多地方不是很熟悉的 ...

  4. ASP.NET MVC框架开发系列教程

    本系列教程是自己在工作中使用到而记录的,如有错误之处,请给与指正 文章目录 MVC4 开篇 第一章 初识MVC4 第二章 下山遇虎(@helper) 第三章 Models模块属性详解 第四章 在MVC ...

  5. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap

    按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库.之前这段时间都是在学习IOS开发,没顾得上写,也没顾得上维护OrchardNoCMS代码.看看我的活动轨迹 ...

  6. Bootstrap系列 -- 1. 如何使用Bootstrap

    一. Bootstrap 简介 Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/ 二. Bootstrap核心 ...

  7. ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  8. ASP.NET MVC 入门系列教程

    ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...

  9. ASP.NET MVC Model绑定(一)

    ASP.NET MVC Model绑定(一) 前言 ModelMetadata系列的结束了,从本篇开始就进入Model绑定部分了,这个系列阅读过后你会对Model绑定有个比较清楚的了解, 本篇对于Mo ...

  10. 自学MVC看这里——全网最全ASP.NET MVC 教程汇总

    MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC技术的学习者提供一个整合学习入口.本文从 ...

随机推荐

  1. 4.Android App 优化之消除卡顿

    转载:http://gold.xitu.io/post/582583328ac247004f3ab124 1, 感知卡顿 用户对卡顿的感知, 主要来源于界面的刷新. 而界面的性能主要是依赖于设备的UI ...

  2. Hdfs常用操作

    一.linux rm是删除,不是del 二.常用操作 package hdfs; import java.io.FileInputStream; import java.io.FileNotFound ...

  3. Android成长日记-数据存储之SQLite[1]

    [SQLite简介] SQLite是R.Richard Hipp用C语言编写的开源嵌入式数据库引擎.它支持大多数的SQL92标准,并且可以在所有主要的操作系统上运行 ---支持高达2TB大小的数据库: ...

  4. 洛谷P1808 单词分类

    题目描述 Oliver为了学好英语决定苦背单词,但很快他发现要直接记住杂乱无章的单词非常困难,他决定对单词进行分类. 两个单词可以分为一类当且仅当组成这两个单词的各个字母的数量均相等. 例如“AABA ...

  5. Swift Swift中的反射

    Swift的反射机制是基于一个叫 Mirror 的 struct 来实现的,其内部有如下属性和方法: let children: Children //对象的子节点. displayStyle: Mi ...

  6. Objective-C 再谈OC指针,对比C++/Java/Swift

    1.Objective-C的指针 OC一直是人感觉比较变态的一门语言,为什么呢?因为它的每个变量都是指针型,多的都几乎让人忘了那个*的存在了. 比如我定义了一个Student的Class,new了st ...

  7. TCP/IP详解 笔记十四

    TCP/IP协议(二)  连接的建立与终止 tcpdump -S输出TCP报文的格式 格式: 源>目的:标志 (标志就是tcp头部).标识首字符意义如下: 例如:telnet 某服务的输出(包括 ...

  8. 通过Minimal版的iso安装CentOS7之后升级Desktop

    重新安装了CentOS7,但是使用的是Minimal的iso镜像安装的,所以安装之后只有文本界面,这里记录一下重新安装图形界面的过程. 连接网络 通过文本界面登陆后是没有连接网络的,所以需要修改配置连 ...

  9. 基本概率分布Basic Concept of Probability Distributions 1: Binomial Distribution

    PDF下载链接 PMF If the random variable $X$ follows the binomial distribution with parameters $n$ and $p$ ...

  10. linux下history命令显示历史指令记录的使用方法

    Linux系统当你在shell(控制台)中输入并执行命令时,shell会自动把你的命令记录到历史列表中,一般保存在用户目录下的.bash_history文件中.默认保存1000条,你也可以更改这个值 ...