Bootstrap提供布局，按鈕，表單，菜單，小部件，圖片輪播，標(biāo)簽，徽章，排版以及各種功能所需的所有部分。由于Bootstrap都是HTML，CSS和JavaScript，所有開放的標(biāo)準(zhǔn)，你可以使用任何框架，包括ASP.NET MVC。當(dāng)你開始一個新的MVC項目時，Bootstrap將會出現(xiàn)，在項目中可以找到Bootstrap.css 和Bootstrap.js 。

我們來創(chuàng)建一個新的ASP.NET Web應(yīng)用程序。填寫項目的名稱：MVCBootstrap，然后單擊確定，會看到下面的對話框。

在這個對話框中，如果選擇了空的模板，會得到一個空的web應(yīng)用程序，并且不會有Bootstrap ，不會有任何控制器或任何其他腳本文件。

現(xiàn)在選擇MVC模板，然后單擊確定。當(dāng)Visual Studio創(chuàng)建這個解決方案時，它將下載并安裝到項目中的一個包將成為Bootstrap NuGet包?？梢酝ㄟ^到packages.config 進行驗證，可以看到有Bootstrap版本3 的包，如下圖所示 -

還可以看到包含不同 css 文件的 Content 文件夾。

運行這個應(yīng)用程序，會看到下面的頁面。

出現(xiàn)此頁面時，看到的大部分布局和樣式都是由 Bootstrap 應(yīng)用的布局和樣式。它包括頂部的導(dǎo)航欄，鏈接以及廣告ASP.NET的顯示。它還包括所有這些部分，關(guān)于入門和獲得更多的類庫和虛擬主機。

如果只是稍微拉伸一下瀏覽器，那么這些瀏覽器實際上并排放置，這是Bootstrap 響應(yīng)式設(shè)計功能的一部分。

如果查看Content文件夾，那么應(yīng)該會看到有一個Bootstrap.css 文件。
NuGet軟件包還提供了一個縮小版本的文件。在Scripts目錄下，應(yīng)該有一個：Bootstrap.js 文件，這是Bootstrap的一些組件所必需的。

它確實依賴于jQuery，幸運的是jQuery也安裝在這個項目中，并且有一個縮小版的Bootstrap JavaScript文件。

現(xiàn)在的問題是，所有這些在應(yīng)用程序中添加了哪里？可能您期望它在布局模板中，位于View/Shared/_layout.cshtml 下的此項目的布局視圖。

布局視圖控制著用戶界面的結(jié)構(gòu)。以下是_layout.cshtml文件中的完整代碼。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 我的 ASP.NET 應(yīng)用程序</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("應(yīng)用程序名稱", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("主頁", "Index", "Home")</li>
                    <li>@Html.ActionLink("關(guān)于", "About", "Home")</li>
                    <li>@Html.ActionLink("聯(lián)系方式", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>? @DateTime.Now.Year - 我的 ASP.NET 應(yīng)用程序</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

在上面的代碼中有兩點需要注意。首先在<title>之后，看到下面這行代碼。

@Styles.Render("~/Content/css")

Styles.Render對于 Content/css 實際上是Bootstrap.css文件將被包含的地方，在底部，會看到下面這行代碼 -

@Scripts.Render("~/bundles/bootstrap")

它正在渲染引導(dǎo)腳本，找出這些包里面究竟是什么，打開App_Start文件夾中的BundleConfig.cs 文件，內(nèi)容如下所示 -

在BundleConfig.cs 文件中，可以從底部看到CSS包包含了Bootstrap.css 和自定義的site.css 。如下所示 -

bundles.Add(new StyleBundle("~/Content/css").Include(
   "~/Content/bootstrap.css",
   "~/Content/site.css"));

這是我們添加自己的樣式表來定制應(yīng)用程序外觀的地方。還可以看到在包含Bootstrap.js 的CSS包之前出現(xiàn)的Bootstrap包，以及另一個JavaScript文件respond.js。

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
   "~/Scripts/bootstrap.js",
   "~/Scripts/respond.js"));

下面來注釋掉Bootstrap.css 文件，如下面的代碼所示 -

bundles.Add(new StyleBundle("~/Content/css").Include(
   //"~/Content/bootstrap.css",
   "~/Content/site.css"));

再次運行此應(yīng)用程序，只是為了讓您了解Bootstrap的功能，因為現(xiàn)在唯一可用的樣式是site.css 文件中的樣式。得到結(jié)果如下 -

正如上面所看到的，失去了頁面頂部的導(dǎo)航欄。

現(xiàn)在來看看Bootstrap是什么。Bootstrap只是自動執(zhí)行一些操作，當(dāng)添加類并具有正確的HTML結(jié)構(gòu)時，Bootstrap可為您做一些事情。如果查看_layout.cshtml 文件，可以看到如以下代碼所示的navbar類 -

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("應(yīng)用程序名稱", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("主頁", "Index", "Home")</li>
                    <li>@Html.ActionLink("關(guān)于", "About", "Home")</li>
                    <li>@Html.ActionLink("聯(lián)系方式", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

它是Bootstrap的CSS類，如navbar，navbar inverse和navbar fixed top。如果刪除了一些像navbar inverse，navbar fixed top這樣的類，并且取消注釋Bootstrap.css，然后再次運行應(yīng)用程序，應(yīng)該會看到下面的輸出。

會看到有一個導(dǎo)航欄，但現(xiàn)在它不使用反色，所以它是白色的。它也不會粘在頁面的頂部。當(dāng)向下滾動時，導(dǎo)航欄會從頂部滾動，將無法再看到它。

上一篇：ASP.Net MVC Web API下一篇：ASP.Net MVC開發(fā)環(huán)境配置