转自 http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step
单位最近做了一个Bootstrap的培训，所以自己查了一些资料，使用ASP.NET MVC4来使用Bootstrap
准备
Visual Studio 2012
Dot Net Framework 4.5
MVC 4
jQuery 1.8.2
Bootstrap http://www.bootcss.com/
查看Bootstrap
下载bootstrap-3.3.5.zip，解压缩后得到三个文件夹，分别是css, fonts与js
开始使用Bootstrap
1. 打开 Visual Studio
2. 创建新的 ASP.NET MVC 4 Web Application 项目
3. 选择Basic Template 并且勾选上 Razor，点击OK
4. 在Solution Explorer中找到Scripts文件夹，找到两个jquery-ui文件，并且将这两个文件删除
5. 在Content文件夹中删除themes文件夹
6. 右键点击Scripts文件夹，选择添加已经存在的项目，找到bootstrap文件夹下的bootstrap.js和bootstrap.min.js
7. 右键点击Content 文件夹，选择添加已存在的项目，找到bootstrap文件夹下的css文件夹，添加所有css文件
8. 找到App_Start文件夹，打开BundleConfig.cs，将文件改成
using System.Web.Optimization; namespace BootstrapDemo { public class BundleConfig { // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.IgnoreList.Clear(); bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include("~/Scripts/bootstrap.min.js")); bundles.Add(new ScriptBundle("~/Content/bootstrapcss").Include("~/Content/bootstrap.min.css", "~/Content/bootstrap.min.css")); } } }
9. 在Views文件夹下的Shared文件夹找到_Layout.cshtml文件，将代码改为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/bootstrapcss") </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">1st Navigation Header</li> <li>@Html.ActionLink("Link 1","../")</li> <li>@Html.ActionLink("Link 2","../")</li> <li>@Html.ActionLink("Link 3","../")</li> <li>@Html.ActionLink("Link 4","../")</li> <li class="nav-header">2nd Navigation Header</li> <li>@Html.ActionLink("Link AA","../")</li> <li>@Html.ActionLink("Link BB","../")</li> <li>@Html.ActionLink("Link CC","../")</li> </ul> </div> </div> <div class="span9"> @RenderSection("featured",required:false) <div class="row-fluid"> @RenderBody() </div> </div> </div> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrapjs") </body> </html>
10. 找到Views下的Home文件夹中的Index.cshtml，添加代码
@{ ViewBag.Title = "Home Page"; } @section featured { <section class="featured"> <div class="content-wrapper"> <hgroup class="title"> <h1>@ViewBag.Title.</h1> <h2>@ViewBag.Message</h2> </hgroup> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC. If you have any questions about ASP.NET MVC visit <a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>. </p> </div> </section> } <h3>We suggest the following:</h3> <ol class="round"> <li class="one"> <h5>Getting Started</h5> ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more…</a> </li> <li class="two"> <h5>Add NuGet packages and jump-start your coding</h5> NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more…</a> </li> <li class="three"> <h5>Find Web Hosting</h5> You can easily find a web hosting company that offers the right mix of features and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more…</a> </li> </ol>
11. 在Controllers文件夹下找到HomeController.cs文件，更改代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your app description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
12. 按下F5或者点击生成按钮，就能看到最终效果
