twitter-bootstrap 将引导程序样式放入 MVC 中的文本框以获取搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29544428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put bootstrap style to a textbox in MVC for a search box
提问by Levimatt
I have a search box that I want to customize with Bootstrapstyle. The textboxcode in the aspx is:
我有一个想要自定义Bootstrap样式的搜索框。textboxaspx中的代码是：
@Html.TextBox("SearchString")
But I get a textboxwith a standard style.
Otherwise, the button of the searcher is shown with a bootstrap style with this code:
但我得到了textbox一个标准风格的。否则，搜索器的按钮将显示为带有以下代码的引导程序样式：
<button class="btn" type="submit">Buscar</button>
So I have the reference of the bootstrap libraryin my project. What is the best approach to get the textboxwith the correct style?
所以我bootstrap library在我的项目中有参考。获得textbox正确风格的最佳方法是什么？
Thank you in advanced.
先谢谢了。
回答by Trucktech
You can add a class or id to your Html helpers by passing an anonymous object to the htmlAttributes property in the helper constructor like this.
您可以通过将匿名对象传递给助手构造函数中的 htmlAttributes 属性来向 Html 助手添加类或 id，如下所示。
@Html.TextBox("txtBox", null, new { @class = "your class name here", id = "your id name here" })
In Bootstrap you may want to use the classes form-group and form-control. More information in the docs http://getbootstrap.com/css/
在 Bootstrap 中，您可能希望使用类 form-group 和 form-control。文档中的更多信息http://getbootstrap.com/css/
回答by Dawood Awan
You could do it like this:
你可以这样做：
@Html.TextBox("SearchString", null, new {@class="form-control"})
If you want to append the button to your textbox?
如果要将按钮附加到文本框？
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
http://getbootstrap.com/components/#input-groups-buttons
http://getbootstrap.com/components/#input-groups-buttons
You replace your <input>with @Html.TextBox("SearchString", null, new {@class="form-control"})
你替换你<input>的@Html.TextBox("SearchString", null, new {@class="form-control"})
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
@Html.TextBox("SearchString", null, new {@class="form-control"})
</div>
WITH HTML Helper:
使用 HTML 助手：
If you want a HTML Helper for Bootstrap TextBox your could do something like this:
如果你想要一个用于 Bootstrap TextBox 的 HTML Helper，你可以这样做：
public static class MyHtmlHelpers
{
public static MvcHtmlString BootStrapTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> helper,
Expression<Func<TModel, TProperty>> expression)
{
return helper.TextBoxFor(expression, new { @class = "form-control" });
}
}
And then use like this:
然后像这样使用：
@Html.BootStrapTextBoxFor(model => model.FirstName)
