今天小編給大家分享的是在ASP.NET MVC使用Bootstrap的例子，相信很多人都不太了解，為了讓大家更加了解ASP.NET MVC使用Bootstrap，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、源匯網(wǎng)絡(luò)推廣、成都小程序開發(fā)、源匯網(wǎng)絡(luò)營(yíng)銷、源匯企業(yè)策劃、源匯品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供源匯建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：chinadenli.net

作為一名Web開發(fā)者而言，如果不借助任何前端框架，從零開始使用HTML和CSS來構(gòu)建友好的頁面是非常困難的。特別是對(duì)于Windows Form的開發(fā)者而言，更是難上加難。

正是由于這樣的原因，Bootstrap誕生了。Twitter Bootstrap為開發(fā)者提供了豐富的CSS樣式、組件、插件、響應(yīng)式布局等。同時(shí)微軟已經(jīng)完全集成在ASP.NET MVC 模板中。

Bootstrap結(jié)構(gòu)介紹

下載最新版本的Bootstrap。

解壓文件夾后，可以看到Bootstrap的文件分布結(jié)構(gòu)如下，包含3個(gè)文件夾：

• css

• fonts

• js

css文件夾中包含了4個(gè).css文件和2個(gè).map文件。我們只需要將bootstrap.css文件包含到項(xiàng)目里這樣就能將Bootstrap應(yīng)用到我們的頁面中了。bootstrap.min.css即為上述css的壓縮版本。

.map文件不必包含到項(xiàng)目里，你可以將其忽略。這些文件被用來作為調(diào)試符號(hào)（類似于Visual Studio中的.pdb文件），最終能讓開發(fā)人員在線編輯預(yù)處理文件。

Bootstrap使用Font Awesome（一個(gè)字體文件包含了所有的字形圖標(biāo)，只為Bootstrap設(shè)計(jì)）來顯示不同的圖標(biāo)和符號(hào)，fonts文件夾包含了4類的不同格式的字體文件：

• Embedded OpenType (glyphicons-halflings-regular.eot)

• Scalable Vector Graphics (glyphicons-halflings-regular.svg)

• TrueType font (glyphicons-halflings-regular.ttf)

• Web Open Font Format (glyphicons-halflings-regular.woff)

建議將所有的字體文件包含在你的Web應(yīng)用程序中，因?yàn)檫@能讓你的站點(diǎn)在不同的瀏覽器中顯示正確的字體。

EOT字體格式文件需要IE9及以上瀏覽器支持，TTF是傳統(tǒng)的舊字體格式文件，WOFF是從TTF中壓縮得到的字體格式文件。如果你只需要支持IE8之后的瀏覽器、iOS 4以上版本、同時(shí)支持Android，那么你只需要包含WOFF字體即可。

js文件夾包含了3個(gè)文件，所有的Bootstrap插件被包含在boostrap.js文件中，bootstrap.min.js即上述js的壓縮版本，npm.js通過項(xiàng)目構(gòu)建工具Grunt自動(dòng)生成。

在引用boostrap.js文件之前，請(qǐng)確保你已經(jīng)引用了JQuery庫因?yàn)樗械腂ootstrap插件需要JQuery。

在ASP.NET MVC 項(xiàng)目中添加Bootstrap文件

打開Visual Studio 2013，創(chuàng)建標(biāo)準(zhǔn)的ASP.NET MVC項(xiàng)目，默認(rèn)情況下已經(jīng)自動(dòng)添加了Bootstrap的所有文件，如下所示：

說明微軟對(duì)于Bootstrap是非常認(rèn)可的，高度集成在Visual Studio中。

值得注意的是，在Scripts文件中添加了一個(gè)名為_references.js的文件，這是一個(gè)非常有用的功能，當(dāng)我們?cè)谑褂肂ootstrap等一些前端庫時(shí)，它可以幫助Visual Studio啟用智能提示。

當(dāng)然我們也可以創(chuàng)建一個(gè)空的ASP.NET MVC項(xiàng)目手動(dòng)去添加這些依賴文件，正如下圖所示這樣，選擇空的模板：

對(duì)于新創(chuàng)建的空白ASP.NET MVC項(xiàng)目來說，沒用Content，F(xiàn)onts，Scripts文件夾——我們必須手動(dòng)去創(chuàng)建他們，如下所示：

當(dāng)然，也可以用Nuget來自動(dòng)添加Bootstrap資源文件。如果使用圖形界面來添加Bootstrap Nuget Package，則直接搜索Bootstrap即可；如果使用Package Manager Console來添加Bootstrap Nuget Package，則輸入Install-Package bootstrap。

為網(wǎng)站創(chuàng)建Layout布局頁

為了讓我們的網(wǎng)站保持一致的風(fēng)格，我將使用Bootstrap來構(gòu)建Layout布局頁。在Views文件夾創(chuàng)建MVC Layout Page(Razor)布局文件，如下圖所示：

在新創(chuàng)建的Layout布局頁中，使用如下代碼來引用Bootstrap資源文件。

<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">

<script src="@Url.Content("~/js/bootstrap.js")"></script>

其中使用 @Url.Content 會(huì)將虛擬或者相對(duì)路徑轉(zhuǎn)換為絕對(duì)路徑，這樣確保Bootstrap資源文件被引用。

新建一個(gè)名為Home的Controller，并且添加默認(rèn)Index的視圖，使其套用上述的Layout布局頁面，如下所示:

使用捆綁打包和壓縮來提升網(wǎng)站性能

捆綁打包(bundling)和壓縮(minification)是ASP.NET中的一項(xiàng)新功能，允許你提升網(wǎng)站加載速度，這是通過限制請(qǐng)求CSS和JavaScript文件的次數(shù)來完成的。本質(zhì)上是將這類文件結(jié)合到一個(gè)大文件以及刪除所有不必要的字符（比如：注釋、空格、換行）。

對(duì)于大多數(shù)現(xiàn)代瀏覽器訪問一個(gè)主機(jī)名都有6個(gè)并發(fā)連接的極限，這意味著如果你在一張頁面上引用了6個(gè)以上的CSS、JavaScript文件，瀏覽器一次只會(huì)下載6個(gè)文件。所以限制資源文件的個(gè)數(shù)是個(gè)好辦法，真正意義上的使命必達(dá)，而不是浪費(fèi)在加載資源上。

在Bootstrap項(xiàng)目中使用捆綁打包

因?yàn)槲覀儎?chuàng)建的是空的ASP.NET MVC項(xiàng)目，所以并沒有自動(dòng)引用與打包相關(guān)的程序集。打開Nuget Package Manager Console來完成對(duì)Package的安裝，使用如下PowerShell命令：

install-package Microsoft.AspNet.Web.Optimization 來安裝Microsoft.AspNet.Web.Optimization NuGet package以及它依賴的Package，如下所示：

在安裝完成后，在App_Start中添加 BundleConfig類：

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bootstrap/js").Include(
  "~/js/bootstrap.js",
  "~/js/site.js"));
  bundles.Add(new StyleBundle("~/bootstrap/css").Include(
  "~/css/bootstrap.css",
  "~/css/site.css"));
}

ScriptBundle和StyleBundle對(duì)象實(shí)例化時(shí)接受一個(gè)參數(shù)用來代表打包文件的虛擬路徑，Include顧名思義將你需要的文件包含到其中。

然后在Application_Start方法中注冊(cè)它：

protected void Application_Start()
{
  AreaRegistration.RegisterAllAreas();
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  BundleTable.EnableOptimizations = true;
}

記住，不要去包含.min類型的文件到打包文件中，比如bootstrap.min.css、bootstrap.min.js，編譯器會(huì)忽略這些文件因?yàn)樗麄円呀?jīng)被壓縮過了。

在ASP.NET MVC 布局頁使用@Styles.Render("~/bootstrap/css")、@Scripts.Render("~/bootstrap/js")來添加對(duì)打包文件的引用。

如果Visual Studio HTML編輯器表明無法找到Styles和Scripts對(duì)象，那就意味著你缺少了命名空間的引用，你可以手動(dòng)在布局頁的頂部添加System.Web.Optimization 命名空間，如下代碼所示：

@using System.Web.Optimization
<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @*<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">
 <script src="@Url.Content("~/js/bootstrap.js")"></script>*@
 @Scripts.Render("~/bootstrap/js")
 @Styles.Render("~/bootstrap/css")
 </head>
 <body>
 <p>
  @*@RenderBody()*@
 </p>
</body>
</html>

當(dāng)然為了通用性，最佳的實(shí)踐是在Views文件夾的web.config中添加System.Web.Optimization名稱空間的引用，如下所示：

<namespaces>
 <add namespace="System.Web.Mvc" />
 <add namespace="System.Web.Mvc.Ajax" />
 <add namespace="System.Web.Mvc.Html" />
 <add namespace="System.Web.Routing" />
 <add namespace="Bootstrap.Web" />
 <add namespace="System.Web.Optimization" />
</namespaces>

測(cè)試打包和壓縮

為了使用打包和壓縮，打開網(wǎng)站根目錄下的web.config文件，并且更改compilation元素的dubug屬性為false，即為release。

<system.web>

 <compilation debug="false" targetFramework="4.5" />

 <httpRuntime targetFramework="4.5" />

</system.web>

當(dāng)然你可以在Application_Start方法中設(shè)置BundleTable.EnableOptimizations = true來同樣達(dá)到上述效果（它會(huì)override web.config中的設(shè)置，即使debug屬性為true）。

最后瀏覽網(wǎng)頁，查看源代碼，可以清楚看到打包文件的路徑是之前定義過的相對(duì)路徑，點(diǎn)擊這個(gè)鏈接，瀏覽器為我們打開了經(jīng)過壓縮處理過后的打包文件，如下圖所示：

小結(jié)

在這一章節(jié)中，簡(jiǎn)單為大家梳理了Bootstrap的體系結(jié)構(gòu)，然后怎樣在ASP.NET MVC項(xiàng)目中添加Bootstrap，最后使用了打包和壓縮技術(shù)來實(shí)現(xiàn)對(duì)資源文件的打包，從而提高了網(wǎng)站的性能。

以上就是在ASP.NET MVC使用Bootstrap的例子的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)行業(yè)資訊！

當(dāng)前標(biāo)題：在ASP.NETMVC使用Bootstrap的例子
文章路徑：http://chinadenli.net/article2/jdsiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、定制開發(fā)、App開發(fā)、微信公眾號(hào)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)