ASP.NET MVC 使用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(" 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>
<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 Table快速完美搭建后台管理系统
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 现在做的一个app管理以及后台配置系统,需要针对不同的城市作相应的定制化的配置,对一些后台数据也做一些展示和操作,所以每一个模块基本都会有表格的展现形式,这样做的好处就是直观方便操作.对于用什么t
-
详解bootstrap用dropdown-menu实现上下文菜单
详解bootstrap用dropdown-menu实现上下文菜单 写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通的没有触发条件的dropdown-menu,然后写这个menu的父容器的监听即可实现. 代码: <div id="settingInGraph"> <ul class="dropdown-menu" role="menu&
-
BootStrap数据表格实例代码
首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:
-
BootStrap给table表格的每一行添加一个按钮事件
1.在列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate', title: '操作', width: '80px', events: operateEvents, formatter: operateFormatter } 2.写一个函数 function operateFormatter(value, row, index) { return [ '<input type="submit&qu
-
PHP实现登录注册之BootStrap表单功能
前言 前面几篇简单介绍了一下前端与PHP的一些知识点,前端中表单提交是一个非常重要的模块,在本篇中我会介绍一些关于表单的知识,如果前面内容你掌握的不好并且没有大量的练习,我感觉你最好先把标签都记下来. 项目简介 登录与注册是我们在web开发中最常见的模块,也是我们日常生活中经常接触的功能.用户通过前端表单页面填写内容,通过POST方式提交到后台,然后经过PHP代码处理提交内容后,针对登录或者注册的逻辑继续操作. 登录与注册图解 BootStrap前端框架[ http://v3.bootcss.c
-
bootstrap-table组合表头的实现方法
最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家, 1.效果图 2.html代码 <table id="table"></table> 3.javascript代码 $("#table").bootstrapTable({ dataType: "json", method: 'get', contentType: "application/x-www-form-urlencoded",
-
集合Bootstrap自定义confirm提示效果
本文实例为大家分享了集合Bootstrap自定义confirm的具体代码,供大家参考,具体内容如下 效果 这里写图片描述 js端 var Common = { confirm:function(params){ var model = $("#common_confirm_model"); model.find(".title").html(params.title) model.find(".message").html(params.mess
-
Bootstrap Table 删除和批量删除
一条记录可以看做一条数据的数组 1 Html 1.1 批量选择框 1.2 单个删除 2 bootStarp 2.1 批量获得 获得选择的数据 //批量删除 function deleteUserList() { //获取所有被选中的记录 var rows = $("#user").bootstrapTable('getSelections'); if (rows.length== 0) { alert("请先选择要删除的记录!"); ret
-
ASP.NET MVC 使用Bootstrap的方法
作为一名Web开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的.特别是对于Windows Form的开发者而言,更是难上加难. 正是由于这样的原因,Bootstrap诞生了.Twitter Bootstrap为开发者提供了丰富的CSS样式.组件.插件.响应式布局等.同时微软已经完全集成在ASP.NET MVC 模板中. Bootstrap结构介绍 你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap. 解压文件夹
-
Asp.net MVC scheduler的实现方法详解
Asp.net MVC scheduler的实现方法详解 本例使用了fullcalendar js : https://fullcalendar.io/ 1. view : @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section PageContent{ <style> .modal-backdrop { z-index: 9; } </sty
-
利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)
1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号中,我们中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为宝库:可以借此巩固加强一下自己的"全栈&qu
-
利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表
jQuery dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示和详细的文档进行说明,为了方便使用,这里进行详细说明. 去官网:https://www.datatables.net/ 下载最新版本是v1.10.12. 在页面引入: <link rel="stylesheet" href="~/Content_Admin/css/boots
-
利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能（六）
看到新浪微博.百度百家等平台上都带有文章"打赏"功能,觉得很新鲜,于是也想在自己的博客中加入"打赏"功能. 当然,加入打赏功能并非是真的想要让别人打赏.因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞. 而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了). 加入打赏功能纯粹是"觉得好玩",就是这么简单,Just have a fun!(博主喜欢折腾,看见一个酷炫的功能就想去实现它)
-
ASP.NET MVC使用Ninject的方法教程
为什么要使用Ninject? 很多其它类型的IOC容器过于依赖配置文件,老是配置,总感觉有点不爽,而且要使用assembly-qualified名称(也就是类型的全名)来进行定义,稍不注意就会因为打错字而令整个程序崩掉.Ninject是一个快如闪电.超轻量级的基于.Net平台的IOC容器,主要用来解决程序中模块的耦合问题,它的目的在于做到最少配置.因此如果你不喜欢配置,不喜欢重量级IOC框架,那么就用小苹果Ninject吧! Ninject是一个快如闪电的,轻量级的.....依赖注入框架,呃呃呃
-
ASP.NET MVC分页的实现方法
在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList.Mvc包来实现分页功能. 1) 安装PagedList.Mvc 首先,我们需要安装分页组件包,在Visual Studio 2010中点击[项目]-[管理NuGet程序包],打开NuGet包管理器窗体,在该窗体中,选择"联机"标签,然后搜索pagedlist,如下图所示.点击"安
-
利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件? praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等,很酷很炫.但是并没有现成的好用的插件,于是就打算自己做一个类似的点赞插件,放上自己喜欢的点赞图标.PS:小站的图标均来自阿里妈妈旗下的那个ico
-
利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTML标签后的前600个字符): 具体在www.zynblog.com 遇到的问题: 正常来讲,进入文章修改页,只需将UEditor对应的textarea的value设置为文章Content就行了: $('#editor').val('@Html.Raw(this.Model.Contents)'); 最开始我就
-
ASP.NET MVC下Bundle的使用方法
ASP.NET MVC中Bundle是用于打包捆绑资源的(一般是css和js),它是在全局文件Global.asax.cs中注册Bundle,而注册的具体实现默认是在App_Start文件夹的BundleConfig.cs中 public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); Filt