结合Bootsrap用剃刀HTML辅助

我平生第一次学习和做任何 web开发控制，所以它可能看起来像一个明显的问题，但我的困惑是：在我MVC应用程序在第一次，我开始使用控制从Twitter Bootstrap网站的例子，所以例如下拉看起来都很漂亮，然后我知道，我想用例如@HTML.CheckBoxFor等在我的剃刀代码所以使用，现在的控件看起来很丑，就像他们的平原HTML定义看起来。所以我的问题是我怎样才能继续使用@HTML助手为我的控制和模型在剃刀绑定，同时保持其Bootstrap控件的外观和灵活性？结合Bootsrap用剃刀HTML辅助

来源

2016-04-14 Bohn

如果你的财产是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>

的checkbox类名是举

来源

2016-04-14 13:34:52

所有的HTML帮助程序都有一个重载，允许您传入一个对象散列，该对象散列被转换为HTML属性。

你可以用它来类添加到您的控制：

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

来源

2016-04-14 13:34:44 Josh

哦，所以这是秘密？通过@class =“表单控制”会提醒他们，嘿渲染它像一个boostrap控制？ – Bohn

@Bohn - 这不是一个真正的提醒，你是从字面上告诉它使用属性'class =“form-control''来呈现'checkbox'类型的'输入'控件。' 你现在需要做的就是确保你有所有适当的标记和类来匹配bootstrap所需的，你应该得到适当的视觉样式。 – Josh

@波恩 - 如果你看看BviLLe_Kid提供的答案，你将会看到基本上满足你想要的所有标记。在一天结束时，所有的HTML助手都会使用适当的约定来呈现一些标记，以确保所有模型绑定都很开心。 – Josh

结合Bootsrap用剃刀HTML辅助

回答

相关问题