使用Bootstrap
开始使用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>
<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，最后使用了打包和压缩技术来实现对资源文件的打包，从而提高了网站的性能。
使用Bootstrap的更多相关文章
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 旺财速啃H5框架之Bootstrap（一）
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- [BootStrap] 富编辑器，基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...
随机推荐
- GitLab一键式安装bitnami
https://bitnami.com/stack/gitlab/installer https://bitnami.com/redirect/to/96764/bitnami-gitlab-8.5. ...
- 【Java基础】System.arraycopy()的使用详解
由于在Java中System.arraycopy()方法在一维数组和二维数组中的表现不同,所以做了一个测试 public static void main(String[] args) { int[] ...
- HDU2647(拓扑排序+反向建图)
题意不说了,说下思路. 给出的关系是a要求的工资要比b的工资多,因为尽可能的让老板少付钱,那么a的工资就是b的工资+1.能够确定关系为a>b,依据拓扑排序建边的原则是把"小于" ...
- C语言，如何检查文件是否存在和权限的信息
按功能access,头文件io.h(linux通过使用unistd.h int access(const char *filename, int amode); amode參 ...
- 折返(Reentrancy)VS线程安全(Thread safety)
在Wiki上,折返例如,下面的定义(接) In computing, a computer program or subroutine is called reentrant if it can be ...
- C# - Abstract Classes
Abstract classes are closely related to interfaces. They are classes that cannot be instantiated, ...
- JavaScript之三：jQuery插件开发(一)
在早期的开发中,正如前面闭包中所提到的那样,人们一开始并没有意识到要开发出插件这么个玩意儿,都是遇到啥写啥.在长期的工作中,人们发现很多代码是重复的,写了一遍又一遍,以登录页面为例,每写一次都需要重新 ...
- 操作系统学习笔记_12_I/O管理 --I/O管理概述
h1 { margin-bottom: 0.21cm; }h1.western { font-family: "Liberation Sans",sans-serif; font- ...
- harris 算法python实现
harris 最常用作特征检测算法. 第一个文件harris.py <pre name="code" class="python">from sci ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...