MVC4 集成 Bootstrap


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-groupBootstrap中用來布局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, 提供方法顯示不同樣式(SuccessAlertError等)的消息。


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

BootstrapMasterPage文件。

 

2.       global.asax.cs 文件改動

Application Start 方法里面增加:

BootstrapBundleConfig.RegisterBundles(BundleTable.Bundles);

        

3.       如何將BootstrapError樣式應用到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>

   }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM