結合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輔助

回答

相關問題