关注我们

ASP.NET MVC - 引导程序

在本章中，我们将介绍Bootstrap，它是ASP.NET和MVC现在附带的前端框架，它是用于Web应用程序的流行的前端工具套件，将帮助您使用HTML，CSS和JavaScript构建用户界面。

它最初是由Twitter上的Web开发人员创建的，供个人使用，但是由于它的灵活性和易用性，它现在是开源的，并在设计人员和开发人员中很受欢迎。

您可以使用Bootstrap创建一个界面，该界面在大型桌面显示器到小型移动屏幕上都可以显示。在本章中，我们还将研究Bootstrap如何与您的布局视图一起使用以构造应用程序的外观。

让我们创建一个新的ASP.NET Web应用程序。

输入项目名称，如" MVCBootstrap"，然后单击"OK"。您将看到以下对话框。

在此对话框中，如果选择空模板，将得到一个空Web应用程序，并且不存在Bootstrap，也将没有任何控制器或任何其他脚本文件。

现在选择MVC模板，然后单击"OK"。当Visual Studio创建此解决方案时，它将下载并安装到项目中的软件包之一就是Bootstrap NuGet软件包，您可以转到packages.config进行验证，然后可以看到Bootstrap版本3软件包。

您还可以看到Content文件夹，其中包含不同的CSS文件。

运行该应用程序，您将看到以下页面。

出现此页面时，您看到的大多数布局和样式都是Bootstrap应用的布局和样式，它包括带有链接的顶部导航栏，以及用于广告ASP.NET的显示，它还包括有关入门以及获得更多图书馆和网络托管的所有这些内容。

如果您稍微扩展一下浏览器，它们实际上将并排放置，这就是Bootstrap响应式设计功能的一部分。

如果您在内容文件夹下查看，则会找到Bootstrap.css文件。

NuGet软件包还提供了该文件的缩小版本，该版本略小一些，在脚本下，您会找到Bootstrap.js，这是Bootstrap的某些组件所必需的。

它确实依赖jQuery，幸运的是，该项目中还安装了jQuery，并且Bootstrap JavaScript文件有一个缩小版。

现在的问题是，所有这些都添加在应用程序中的什么位置?您可能希望它位于布局模板中，该项目的布局视图位于View/Shared/_layout.cshtml下。

布局视图控制UI的结构，以下是_layout.cshtml文件中的完整代码。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8" />
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
      <title>@ViewBag.Title - My ASP.NET Application</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" datatoggle =
                  "collapse" data-target = ".navbar-collapse">
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>
					
               @Html.ActionLink("Application name", "Index", "Home", new
                  { area="" }, new { @class="navbar-brand" })
            </div>
				
            <div class = "navbar-collapse collapse">
               <ul class = "nav navbar-nav">
                  <li>@Html.ActionLink("Home", "Index", "Home")</li>
                  <li>@Html.ActionLink("About", "About", "Home")</li>
                  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               </ul>
					
               @Html.Partial("_LoginPartial")
            </div>
				
         </div>
			
      </div>
      <div class = "container body-content">
         @RenderBody()
         <hr />
         <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
         </footer>
      </div>
		
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
		
   </body>
</html>

在上面的代码中，有两点需要注意。首先在顶部，在<title>之后，您将看到以下代码行。

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

内容/css的Styles.Render实际上是将包含Bootstrap.css文件的位置，在底部，您将看到以下代码行。

链接：https://www.learnfk.comhttps://www.learnfk.com/asp.net_mvc/asp.net-mvc-bootstrap.html

来源：LearnFk无涯教程网

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

它正在呈现Bootstrap脚本。因此，为了找出这些捆绑包中的确切内容，我们必须进入App_Start文件夹中的BundleConfig文件。

在BundleConfig中，您可以在底部看到CSS捆绑包同时包含Bootstrap.css和我们的自定义site.css。

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

在这里，我们可以添加自己的样式表以自定义应用程序的外观，您还可以看到Bootstrap捆绑包出现在CSS捆绑包之前，该CSS捆绑包包含Bootstrap.js和另一个JavaScript文件response.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"));

再次运行此应用程序，只是让您了解Bootstrap的功能，因为现在唯一可用的样式是site.css中的样式。

如您所见，我们丢失了布局，页面顶部的导航栏。现在，一切看起来都很平凡。

无涯教程网

现在让我们看看Bootstrap的全部含义， Bootstrap会自动完成很多事情，添加类并具有正确的HTML结构时，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" datatoggle =
            "collapse" data-target = ".navbar-collapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
         </button>
         <a class = "navbar-brand" href = "/">Application name</a>
      </div>
		
      <div class = "navbar-collapse collapse">
         <ul class = "nav navbar-nav">
            <li><a href = "/">Home</a></li>
            <li><a href = "/Home/About">About</a></li>
            <li><a href = "/Home/Contact">Contact</a></li>
         </ul>
			
         <ul class = "nav navbar-nav navbar-right">
            <li><a href = "/Account/Register" id = "registerLink">Register</a></li>
            <li><a href = "/Account/Login" id = "loginLink">Log in</a></li>
         </ul>
			
      </div>
		
   </div>
	
</div>