January 27, 2013

ASP.NET MVC 4中使用Bootstrap

Bootstrap是Twitter出的前端框架,在ASP.MVC 4中如果要使用Bootstrap,可以透過nuget來掛載它。在nuget官網可以發現有兩種方式可以載入Bootstrap,只要輸入指令Install-Package Twitter.BootstrapInstall-Package Twitter.Bootstrap.MVC

兩者的差別在於前者僅載入Bootstrap會用到的assets(scripts, css和images),安裝後我們仍須手動註冊Bootstrap的bundles在BundleConfig類別的RegisterBundles方法中,如
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap*"));
bundles.Add(new StyleBundle("~/Content/bootstrap")
       .Include( "~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"));
而後者適用於MVC 4專案中,安裝後會在App_Start資料夾註冊上述的bundles並透過WebActivator於應用程式啟動時自動加載bundles,所以我們無須在BundleConfig類別的RegisterBundles方法中手動加入bundles

參考
http://nuget.org/packages/twitter.bootstrap
http://nuget.org/packages/Twitter.Bootstrap.MVC/
http://nuget.org/packages/WebActivator
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

No comments: