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. 定义一个包(这样做，你就可以免费获得小型化和捆绑)。更多关于这里的信息)
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"})