ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap
2015-09-28 15:46
387 查看
你可以通过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。
打开Visual Studio
2013，创建标准的ASP.NET
MVC项目，默认情况下已经自动添加了Bootstrap的所有文件，如下所示：
当然我们也可以创建一个空的ASP.NET MVC项目手动去添加这些依赖文件，正如下图所示这样，选择空的模板：
对于新创建的空白ASP.NET
MVC项目来说，没用Content，Fonts，Scripts文件夹——我们必须手动去创建他们
当然，也可以用Nuget来自动添加Bootstrap资源文件。如果使用图形界面来添加Bootstrap
Nuget Package，则直接搜索Bootstrap即可；如果使用Package
Manager Console来添加Bootstrap
Nuget Package，则输入Install-Package
bootstrap。
为了让我们的网站保持一致的风格，我将使用Bootstrap来构建Layout布局页。在Views文件夹创建MVC
Layout Page(Razor)布局文件
在新创建的Layout布局页中，使用如下代码来引用Bootstrap资源文件。
新建一个名为Home的Controller，并且添加默认Index的视图，使其套用上述的Layout布局页面
<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<script src="@Url.Content("~/js/bootstrap.js")"></script>
其中使用 @Url.Content 会将虚拟或者相对路径转换为绝对路径，这样确保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的文件分布结构如下，包含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。
打开Visual Studio
2013，创建标准的ASP.NET
MVC项目，默认情况下已经自动添加了Bootstrap的所有文件，如下所示：
当然我们也可以创建一个空的ASP.NET MVC项目手动去添加这些依赖文件，正如下图所示这样，选择空的模板：
对于新创建的空白ASP.NET
MVC项目来说，没用Content，Fonts，Scripts文件夹——我们必须手动去创建他们
当然，也可以用Nuget来自动添加Bootstrap资源文件。如果使用图形界面来添加Bootstrap
Nuget Package，则直接搜索Bootstrap即可；如果使用Package
Manager Console来添加Bootstrap
Nuget Package，则输入Install-Package
bootstrap。
为了让我们的网站保持一致的风格，我将使用Bootstrap来构建Layout布局页。在Views文件夹创建MVC
Layout Page(Razor)布局文件
在新创建的Layout布局页中，使用如下代码来引用Bootstrap资源文件。
新建一个名为Home的Controller，并且添加默认Index的视图，使其套用上述的Layout布局页面
<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<script src="@Url.Content("~/js/bootstrap.js")"></script>
其中使用 @Url.Content 会将虚拟或者相对路径转换为绝对路径，这样确保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自定义模态框的正确方式
- Bootstrap小练习---布局组件
- Bootstrap小练习------插件系列
- ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap
- 解决easyui和bootstrap兼容问题
- 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板
- bootstrap栅格布局
- bootstrap 全局 CSS 样式
- bootstrap.css和esayUi.css样式冲突的解决
- 从 Bootstrap 2.x 版本升级到 3.0 版本
- BootStrap - FileUpload美化样式
- Bootstrap JavaScript 插件概览
- bootstrap3 文件上传插件fileinput中文说明文档
- ASP.NET MVC Bootstrap极速开发框架
- bootstrap初接触
- 基于jquery，bootstrap数据验证插件bootstrapValidator 教程
- Bootstrap之Carousel不能自动播放的解决办法,支持左右滑动手势
- bootstrap modal 弹窗 数据清除
- bootstrap datetimepicker 插件语言选择
- Bootstrap例子——下拉菜单