C# 结合Bootsrap控件和Razor HTML帮助程序

我第一次学习和做任何网络开发，所以这看起来可能是一个明显的问题，但我的困惑是： 在我的MVC应用程序中，首先我开始使用

推特引导

站点示例中的控件，例如，一个下拉列表看起来非常漂亮，然后我了解到我想使用

@HTML.CheckBoxFor

等。在我的Razor代码中，我使用了它，现在这些控件看起来很难看，就像它们的普通HTML定义一样。

---

因此，我的问题是，我如何在Razor中继续使用

@HTML

助手进行控件和模型绑定，同时保持它们的

引导

控件的外观和灵活性

所有HTML帮助程序都有一个重载，允许您传入转换为HTML属性的对象哈希

您可以使用它向控件添加类：

@Html.CheckBox("Blah", new { @class = "form-control" })

---

所有HTML帮助程序都有一个重载，允许您传入转换为HTML属性的对象哈希

您可以使用它向控件添加类：

@Html.CheckBox("Blah", new { @class = "form-control" })

---

如果您的属性类型为

bool

，请尝试以下复选框：

<div class="form-group">
        @Html.LabelFor(model => model.property1, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.property1)
                @Html.ValidationMessageFor(model => model.property1, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

@LabelFor（model=>model.property1，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.property1）
@Html.ValidationMessageFor（model=>model.property1，“，new{@class=“text danger”}）

---

复选框

类名来自引导

如果属性的类型为

bool

，请尝试以下复选框：

<div class="form-group">
        @Html.LabelFor(model => model.property1, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.property1)
                @Html.ValidationMessageFor(model => model.property1, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

@LabelFor（model=>model.property1，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.property1）
@Html.ValidationMessageFor（model=>model.property1，“，new{@class=“text danger”}）

---

复选框

类名来自引导

哦，这就是秘密？传递@class=“form control”会提醒他们将其呈现为一个boostrap控件？@Bohn-这不是真正的提醒，您实际上是在告诉它使用属性

class=“form control”呈现一个
输入
类型的控件
checkbox
您现在需要做的就是确保您拥有与bootstrap所需内容相匹配的所有适当标记和类，并且您应该获得适当的视觉样式。@Bohn-如果您查看Ville_Kid提供的答案，您将基本上看到获得所需内容所需的完整标记。最后，HTML助手所做的就是使用适当的约定呈现一些标记，以确保所有的模型绑定都是愉快的？传递@class=“form control”会提醒他们将其呈现为一个boostrap控件？@Bohn-这不是真正的提醒，您实际上是在告诉它使用属性
class=“form control”呈现一个
输入
类型的控件
checkbox
您现在需要做的就是确保您拥有与bootstrap所需内容相匹配的所有适当标记和类，并且您应该获得适当的视觉样式。@Bohn-如果您查看Ville_Kid提供的答案，您将基本上看到获得所需内容所需的完整标记。最后，HTML助手所做的就是使用适当的约定呈现一些标记，以确保所有模型绑定都是满意的。感谢您的解释：）