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

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

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

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

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

運(yùn)行這個(gè)應(yīng)用程序，會(huì)看到下面的頁(yè)面。

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

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

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

它確實(shí)依賴于jQuery，幸運(yùn)的是jQuery也安裝在這個(gè)項(xiàng)目中，并且有一個(gè)縮小版的Bootstrap JavaScript文件。

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

布局視圖控制著用戶界面的結(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("主頁(yè)", "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>

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

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

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

@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"));

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

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

下面來(lái)注釋掉Bootstrap.css 文件，如下面的代碼所示 -

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

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

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

現(xiàn)在來(lái)看看Bootstrap是什么。Bootstrap只是自動(dòng)執(zhí)行一些操作，當(dāng)添加類并具有正確的HTML結(jié)構(gòu)時(shí)，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("主頁(yè)", "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ùn)行應(yīng)用程序，應(yīng)該會(huì)看到下面的輸出。

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

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

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

ASP.Net MVC Bootstrap