Bootstrap 与 ASP.NET MVC 4 不使用 NuGet Package 笔记

时间：2021-08-06 10:07:38

转自 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文件

Bootstrap 与 ASP.NET MVC 4 不使用 NuGet Package 笔记

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或者点击生成按钮，就能看到最终效果

Bootstrap 与 ASP.NET MVC 4 不使用 NuGet Package 笔记

相关文章