asp.net mvc boostrap框架

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等。

// 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="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库已链接到该网页。以下两个屏幕截图显示了这一点。