在本章中,我们将介绍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文件的位置,在底部,您将看到以下代码行。
@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>
它是Bootstrap中的CSS类,如navbar,navbar inverse和navbar fixed top。如果删除其中一些类,如navbar inverse,navbar fixed top,并且取消对Bootstrap.css的注释,然后再次运行您的应用程序,您将看到以下输出。
您将看到我们仍然有一个导航栏,但是现在它没有使用反色,所以它是白色。它也不会停留在页面顶部。向下滚动时,导航栏将滚动到顶部,您将无法再看到它。
链接:https://www.learnfk.comhttps://www.learnfk.com/asp.net_mvc/asp.net-mvc-bootstrap.html
来源:LearnFk无涯教程网
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
HarmonyOS快速入门与实战 -〔QCon+案例研习社〕