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

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

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

Bootstrap提供了布局，按钮，表单，菜单，小部件，图片轮播，标签，徽章，版式和各种功能所需的所有组件。由于Bootstrap都是HTML，CSS和JavaScript，都是开放标准，因此您可以将其与ASP.NET MVC等任何框架一起使用。当您开始一个新的MVC项目时，将出现Bootstrap，这意味着您将在项目中找到Bootstrap.css和Bootstrap.js。

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

输入项目名称，假设为“ MVCBootstrap”，然后单击“确定”。您将看到以下对话框。

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

现在选择MVC模板，然后单击“确定”。当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文件中的完整代码。

      
      
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
   
    
   
      

         

            
            

               
                  
                  
                  
               
                    
               @Html.ActionLink("Application name", "Index", "Home", new
                  { area = "" }, new { @class = "navbar-brand" })
            
                
            

               

                  
@Html.ActionLink("Home", "Index", "Home")
                  
@Html.ActionLink("About", "About", "Home")
                  
@Html.ActionLink("Contact", "Contact", "Home")
               
                    
               @Html.Partial("_LoginPartial")
            
                
         
            
      
      

         @RenderBody()
         

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

在上面的代码中，有两点需要注意。首先在顶部，在