MVC 表单中的自定义样式 CSS

Question

我在 ASP.NET MVC 4 中迈出了第一步。在制作表单时，我在样式方面几乎没有问题。在下面，您可以看到我的 MVC 项目中的内容。它工作正常，但没有任何风格。

@using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        <fieldset>
            <p>Welcome!</p>
            <legend><h2>Log in</h2></legend>
            <div class="editor-label">
                @Html.LabelFor(model => model.UserName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.UserName)
                @Html.ValidationMessageFor(model => model.UserName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Password)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.RememberMe)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.RememberMe)
            </div>    
            <p>
                <input type="submit" value="Enter"/>
            </p>
        </fieldset>
    }

在下面你可以看到我用传统的html单独标记的内容。这里的每个元素都有自己的风格，因为我使用了巨大的 css 文件。

<div class="container">
        <header>
            <h1><strong>Welcome!</strong></h1>
            <h2>Log in</h2>
        </header>
        <section class="main">
            <form class="form-3">
                <p class="clearfix">
                    <label for="login">Log in</label>
                    <input type="text" name="login" id="login" placeholder="Username">
                </p>
                <p class="clearfix">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" placeholder="Password"> 
                </p>
                <p class="clearfix">
                    <input type="checkbox" name="remember" id="remember">
                    <label for="remember">Запомнить</label>
                </p>
                <p class="clearfix">
                    <input type="submit" name="submit" value="Enter">
                </p>       
            </form>​
        </section>
    </div>

问题：如何正确地将我在传统 html 中使用的相同样式（css 文件）应用于我的 MVC 项目？

编辑：

<div class="container">
        <header>
            <h1><strong>Welcome</strong></h1>
            <h2>Log In</h2>
        </header>
        <section class="main">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(true)
                <form class="form-3">
                    <p class="clearfix">
                        <label for="login">Username</label>
                        <!--<input type="text" name="login" id="login" placeholder="Username">-->
                        @Html.EditorFor(model => model.UserName, new { id = "login", placeholder = "Username", type = "text", name = "login" })
                        @Html.ValidationMessageFor(model => model.UserName)
                    </p>
                    <p class="clearfix">
                        <label for="password">Password</label>
                        <!--<input type="password" name="password" id="password" placeholder="Password">-->
                        @Html.EditorFor(model => model.Password, new { id = "password", type = "password", name = "password", placeholder = "Password" })
                        @Html.ValidationMessageFor(model => model.Password)
                    </p>
                    <p class="clearfix">
                        <!--<input type="checkbox" name="remember" id="remember">-->
                        @Html.EditorFor(model => model.RememberMe, new { type = "checkbox", name = "remember", id = "remember" })
                        <label for="remember">Remember</label>
                    </p>
                    <p class="clearfix">
                        <input type="submit" name="submit" value="Enter">
                    </p>
                </form>
            }
        </section>
    </div>

Answer 1

如果您希望使用一个或多个 css 文件，您可以执行以下操作：

1. 将 CSS 添加到内容文件夹
2. 定义一个捆绑包（执行此操作，您可以免费获得缩小和捆绑。更多信息here）
3. 将其添加到 _layout.cshtml 的标题中

第 1 步：

第 2 步（App_Start/BundleConfig.cs）：

bundles.Add(new StyleBundle("cssPathName").Include(new []
            {
                "~/Content/Css/Base/style.css"
            }
        ));

第 3 步：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>

    </title>
    @Styles.Render("cssPathName")
</head>
<body>
</body>
</html>

不想使用捆绑和缩小？

忽略第 2 步并将其用于第 3 步：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>

    </title>
    <link href="@Url.Content("~/Content/Css/Base/style.css")" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

例如编辑器上的内联类

@Html.EditorFor(model => model.RememberMe, new{@class="css-class-name"})