Nuget 確實是個神器,能夠將絕大部分開源項目直接應用到項目上,本文將Bootstrap集成到MVC4 中也是通過Nuget來操作的。
1. 將twitter.bootstrap.mvc4集成到MVC4中,可通過關鍵字:twitter.bootstrap.mvc4 或 bootstrap.mvc搜索到。
該包依賴twitter.bootstrap, 會自動將bootstrap集成到項目中。
包中的文件說明:
a. App_Start \BootstrapBundleConfig:配置腳本,樣式文件。
b. BootstrapSupport\ ControlGroupExtensions.cs 擴展HtmlHelper, 方法BeginControlGroupFor,用例:
Control-group是Bootstrap中用來布局Form的樣式,參考:http://twitter.github.com/bootstrap/base-css.html#forms

@Html.BeginControlGroupFor(model=>model.Name)
@Html.LabelFor(model => model.Name,new {@class="control-label"})
<div class="controls">
@Html.EditorFor(model => model.Name,new {@class="input-xlarge"})
@Html.ValidationMessageFor(model => model.Name,null,new{@class="help-inline"})
</div>
@Html.EndControlGroup()
生成的代碼等效:
<div class="control-group">
……
</div>
注意:強烈推薦使用該擴展方法,當提交后台驗證不通過后,會在這個div上加上錯誤樣式。例:
c. BootstrapBaseController.cs, 提供方法顯示不同樣式(Success,Alert,Error等)的消息。

d. Scripts/ jquery.validate.unobtrusive-custom-for-bootstrap.js,
重寫jquery.validate.unobtrusive.js,驗證不通過后,用Bootstrap的樣式替換原來的錯誤提示樣式。通過學習這個js,可以將其他的任意錯誤信息樣式替換MVC4 中的默認樣式。這個是可以修改HTML結構的哦,可比簡單的修改css要強大。
e. Views/Shared/_alerts.cshtml
上面顯示的消息,就是通過這個partive view生成的。
f. Views/Shared/_BootstrapLayout.cshtml
Bootstrap的MasterPage文件。
2. global.asax.cs 文件改動
Application Start 方法里面增加:
BootstrapBundleConfig.RegisterBundles(BundleTable.Bundles);
3. 如何將Bootstrap的Error樣式應用到Validation?
1. 引用Bootstrap的相關樣式和腳本文件
可參考附件中的Views/Shared/_BootstrapLayout.cshtml
2. 引用腳本Scripts/ jquery.validate.unobtrusive-custom-for-bootstrap.js
注:jquery.validate. unobtrusive.js 這個腳本不需要了。
3. 為表單的驗證信息添加css, ‘help-inline’. 示例代碼:
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset class="form-horizontal">
<legend>HomeInputModel</legend>
@Html.BeginControlGroupFor(model => model.Name)
@Html.LabelFor(model => model.Name, new { @class = "control-label" })
<div class="controls">
@Html.EditorFor(model => model.Name, new { @class = "input-xlarge" })
@Html.ValidationMessageFor(model => model.Name, null, new { @class = "help-inline" })
</div>
@Html.EndControlGroup()
</fieldset>
}
