asp.net mvc boostrap框架 asp.netmvcboostrap|ASP.NET教程

Bootstrap是一种流行的Web框架，用于创建即使在移动设备上也可以运行的响应式Web应用程序。它提供HTML，CSS和JavaScript库来构建应用程序。
默认情况下，ASP.NET MVC支持Bootstrap并使用其库来创建应用程序的前端。让我们创建一个MVC项目并检查其库。
首先通过从文件菜单中选择创建一个项目。

文章图片
选择Web项目的类型。

文章图片
【asp.net mvc boostrap框架】选择Web应用程序的模板。我们正在选择MVC。

文章图片
单击确定后，它将创建一个具有以下结构的项目。

文章图片
项目的Script文件夹包含Bootstrap JavaScript库。我们的项目包括以下JavaScript文件。

文章图片
Content文件夹包含Bootstrap CSS文件。我们的项目包含以下文件。

文章图片
要查看这些CSS类的用法，请单击网页右上角的登录链接。这将重定向到具有要填写的表单的登录页面。此表单包含HTML组件，这些组件在CSS类的帮助下按布局进行组织。
仔细看一下Login.cshtml文件的源代码。该文件使用CSS类，例如row，col-md-8等。
// Login.cshtml

@using MvcApplicationDemo.Models @model LoginViewModel @{ ViewBag.Title = "Log in"; } < h2>@ViewBag.Title.< /h2> < div class="row"> < div class="col-md-8"> < section id="loginForm"> @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html.AntiForgeryToken() < h4>Use a local account to log in.< /h4> < hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) < div class="form-group"> @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" }) < div class="col-md-10"> @Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" }) < /div> < /div> < div class="form-group"> @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" }) < div class="col-md-10"> @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" }) < /div> < /div> < div class="form-group"> < div class="col-md-offset-2 col-md-10"> < div class="checkbox"> @Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe) < /div> < /div> < /div> < div class="form-group"> < div class="col-md-offset-2 col-md-10"> < input type="submit" value="http://www.srcmini.com/Log in" class="btn btn-default" /> < /div> < /div> < p> @Html.ActionLink("Register as a new user", "Register") < /p> @* Enable this once you have account confirmation enabled for password reset functionality < p> @Html.ActionLink("Forgot your password?", "ForgotPassword") < /p>*@ } < /section> < /div> < div class="col-md-4"> < section id="socialLoginForm"> @Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl }) < /section> < /div> < /div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }

如果我们查看Login.cshtml页面的视图源，则表明Bootstrap库已链接到该网页。以下两个屏幕截图显示了这一点。