📅  最后修改于: 2020-12-28 00:54:57             🧑  作者: Mango
Bootstrap是一种流行的Web框架,用于创建即使在移动设备上也可以运行的响应式Web应用程序。它提供HTML,CSS和JavaScript库来构建应用程序。
默认情况下,ASP.NET MVC支持Bootstrap并使用其库来创建应用程序的前端。让我们创建一个MVC项目并检查其库。
首先通过从文件菜单中选择创建一个项目。
选择Web项目的类型。
选择Web应用程序的模板。我们正在选择MVC。
单击确定后,它将创建一个具有以下结构的项目。
项目的Script文件夹包含Bootstrap JavaScript库。我们的项目包括以下JavaScript文件。
Content文件夹包含Bootstrap CSS文件。我们的项目包含以下文件。
要查看这些CSS类的用法,请单击网页右上角的登录链接。这将重定向到具有要填写的表单的登录页面。此表单包含HTML组件,这些组件在CSS类的帮助下按布局进行组织。
仔细看一下Login.cshtml文件的源代码。该文件使用CSS类,例如row,col-md-8等。
@using MvcApplicationDemo.Models
@model LoginViewModel
@{
ViewBag.Title = "Log in";
}
@ViewBag.Title.
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl },
FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
Use a local account to log in.
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
@Html.ActionLink("Register as a new user", "Register")
@* Enable this once you have account confirmation enabled for password reset functionality
@Html.ActionLink("Forgot your password?", "ForgotPassword")
*@
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
如果我们查看Login.cshtml页面的视图源,则表明Bootstrap库已链接到该网页。以下两个屏幕截图显示了这一点。