在本章中,我们将介绍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应用程序.
输入名称项目,让我们说'MVCBootstrap',然后单击确定.您将看到以下对话框.
在此对话框,如果选择空模板,您将获得一个空的Web应用程序,并且不会出现Bootstrap.也不会有任何控制器或任何其他脚本文件.
现在选择MVC模板并单击Ok.当Visual Studio创建此解决方案时,它将下载并安装到项目中的其中一个软件包将是Bootstrap NuGet软件包.你可以通过转到packages.config来验证,你可以看到Bootstrap版本3包.
您还可以看到包含不同css文件的Content文件夹.
运行此应用程序,您将看到以下页面.
当出现此页面时,您看到的大部分布局和样式都是Bootstrap应用的布局和样式.它包括顶部的导航栏,链接以及宣传ASP.NET的显示.它还包括关于入门和获得更多库和Web托管的所有这些内容.
如果您稍微扩展浏览器,那些实际上会并排放置这是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")
Content/css的Styles.Render实际上是包含Bootstrap.css文件的位置,在底部,您将看到以下代码行.
@Scripts.Render("~/bundles/bootstrap")
It正在渲染Bootstrap脚本.因此,为了找出这些bundle内部的确切内容,我们必须进入BundleConfig文件,该文件位于App_Start文件夹中.
在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.
当你可以看到我们丢失了布局,页面顶部的导航栏.现在一切看起来都很普通和无聊.
现在让我们看看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,然后再次运行您的应用程序,您将看到以下输出.
你会看到我们仍然有一个导航栏,但现在它没有使用反色,所以它是白色的.它也不会粘在页面顶部.当您向下滚动时,导航栏会滚动到顶部,您将无法再看到它.