ASP.NET MVC - Bootstrap

在本章中,我们将介绍Bootstrap,它是ASP.NET和MVC现在包含的前端框架.它是一个流行的Web应用程序前端工具包,它将帮助您构建HTML,CSS和JavaScript的用户界面.

它最初是由Twitter开发人员在Twitter上创建的.但是,由于其灵活性和易用性,它现在是一个开源的设备和开发人员,因此非常受欢迎.

您可以使用Bootstrap创建一个看起来不错的界面从大型桌面显示器到小型移动屏幕,应有尽有.在本章中,我们还将介绍Bootstrap如何使用布局视图来构建应用程序的外观.

Bootstrap提供布局,按钮,表单所需的所有部分,菜单,小部件,图片轮播,标签,徽章,排版和各种功能.由于Bootstrap是所有HTML,CSS和JavaScript,所有开放标准,因此您可以将它与任何框架(包括ASP.NET MVC)一起使用.当你启动一个新的MVC项目时,会出现Bootstrap,这意味着你会在你的项目中找到Bootstrap.css和Bootstrap.js.

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

ASP.NET Web Application

输入名称项目,让我们说'MVCBootstrap',然后单击确定.您将看到以下对话框.

MVCBootstrap

在此对话框,如果选择空模板,您将获得一个空的Web应用程序,并且不会出现Bootstrap.也不会有任何控制器或任何其他脚本文件.

现在选择MVC模板并单击Ok.当Visual Studio创建此解决方案时,它将下载并安装到项目中的其中一个软件包将是Bootstrap NuGet软件包.你可以通过转到packages.config来验证,你可以看到Bootstrap版本3包.

Bootstrap版本3包

您还可以看到包含不同css文件的Content文件夹.

内容文件夹

运行此应用程序,您将看到以下页面.

运行此应用程序

当出现此页面时,您看到的大部分布局和样式都是Bootstrap应用的布局和样式.它包括顶部的导航栏,链接以及宣传ASP.NET的显示.它还包括关于入门和获得更多库和Web托管的所有这些内容.

如果您稍微扩展浏览器,那些实际上会并排放置这是Bootstrap响应式设计功能的一部分.

Bootstrap的响应式设计功能

如果你查看内容文件夹,你会发现Bootstrap.css文件.

Bootstrap .css文件

NuGet包还提供了一个稍微小一点的文件的缩小版本.在脚本下,你会发现Bootstrap.js,这是Bootstrap的一些组件所必需的.

 Bootstrap.js

它确实依赖于jQuery,幸运的是jQuery也安装在这个项目中,并且还有一个缩小版本的Bootstrap JavaScript文件.

现在问题是,应用程序中添加了所有这些内容?您可能会想到,它将位于布局模板中,此项目的布局视图位于View/Shared/_layout.cshtml下.

Layout View Controls

布局视图控制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>&copy; @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")


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

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


It正在渲染Bootstrap脚本.因此,为了找出这些bundle内部的确切内容,我们必须进入BundleConfig文件,该文件位于App_Start文件夹中.

BundleConfig文件

在BundleConfig中,您可以在底部看到CSS包包含Bootstrap.css和我们的自定义site.css.

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


在这里我们可以添加自己的样式表来自定义应用程序的外观.您还可以看到包含Bootstrap.js的CSS包之前出现的Bootstrap包,以及另一个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正在做什么,因为现在唯一可用的样式是站点中的样式.css.

site.css中的样式

当你可以看到我们丢失了布局,页面顶部的导航栏.现在一切看起来都很普通和无聊.

现在让我们看看Bootstrap是什么. Bootstrap会自动执行一些操作,当您添加类并具有正确的HTML结构时,Bootstrap可以为您执行一些操作.如果查看_layout.cshtml文件,您将看到导航栏类,如以下代码所示.

<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>

这是来自Bootstrap的CSS类,如navbar,navbar inverse和navbar fixed top.如果您删除其中一些类,如navbar inverse,navbar fixed top并取消注释Bootstrap.css,然后再次运行您的应用程序,您将看到以下输出.

CSS类

你会看到我们仍然有一个导航栏,但现在它没有使用反色,所以它是白色的.它也不会粘在页面顶部.当您向下滚动时,导航栏会滚动到顶部,您将无法再看到它.

导航栏