Responsive Web Design 響應式設計及 ASP.NET版面魔法師 – Bootstrap

Article
10/22/2013

註: 本篇內容 WebForm及 MVC技術皆可適用

作者：陳傳興 (Bruce, 微軟最有價值專家)

Visual Studio 2013內建One ASP.NET範本（含WebForms與MVC 5範本），採用全新的Twitter Bootstrap框架（以下簡稱Bootstrap）全面改造網頁版面設計。採用Bootstrap框架來設計頁面可以得到許多好處，例如，讓不懂或不熟悉CSS的開發人員也能產出有一定版面（Layout）水準的網站、基礎常用的JavaScript互動效果、快速取得響應式網頁（Responsive Web）的功能、網路上豐富的Bootstrap資源。

註：Visual Studio 2013 RTM將會採用Bootstrap於2013/8/16發行的3.0.0版，Visual Studio 2013 RC是採用Bootstrap 2.3.1版，請注意2.x與3.x兩個版本使用上有差異。

Twitter Bootstrap

Bootstrap是由Mark Otto與Jacob所打造並可免費商業使用的一套CSS框架（內含jQuery外掛），它在目前主流桌面瀏覽器上有極佳的表現。（2.x版支援Internet Explorer 7以上，3.x版不支援Internet Explorer 7）

Bootstrap有著以下特色：

l 12列嚮應式網格

l 豐富的元件

l JavaScript外掛

l 快速佈局

l 表單控制項

l 基於網頁客製化工具

l 響應式CSS的快速導入

Bootstrap含有什麼？

Bootstrap 中的HTML、CSS和JQuery適合各種設備，它基本上含有：

l 架構
body元素的全域樣式，用於重設背景、連結樣式、網格系統和佈局結構。

l 基礎CSS
常見HTML元素，像是佈局、程式碼、表格、表單和按鈕。還包含 Glyphicons。一個非常優秀的icon圖集。

l 元件
常見介面元件，像是標簽、pill、巡覽、警告、頁面標頭等。

l JavaScript
和元件類似，這些JavaScript外掛用以實現如提示（tooltip）、彈出視窗（popover）、對話視窗（modal）等具互動性的元件。

Bootstrap在國外是相當火紅的框架，其他學習資源或應用資源都非常豐富。

Bootstrap的快速支援響應式頁面能力

透過Visual Studio 2013 新增一個Web Forms專案，然後執行應用程式：

圖一

首頁有別於之前Visual Studio範本的版面：

圖二

當我們將網頁縮小後，並不會影響版面的排版樣式：

圖三

應用程式的在縮小後的網頁依然可非常正常的操作：

圖四

這種在縮放之間可以自己調整頁面，在CSS3上稱為媒體查詢 (Media Queries)，或支援此媒體查詢的網頁稱呼為響應式網頁 (Responsive Web)。

Bootstrap快速套版能力

在Bootstrap架構下要進行套版或換版是相當容易的一件事。現在馬上來為剛剛建立的專案進行換版的動作。

首先先到 https://bootswatch.com/2/ 網站，瀏覽網頁下方的免費Bootstrap範本，點擊Download下載bootstrap.css檔案。（以下使用Cerulean範本）
將下載回來的bootstrap.css覆蓋“~/Content”下預設的bootstrap.css。
重新執行應用程式。

圖五

讀者可以看到，在Bootstrap相同架構之下要進行換版或套件是非常容易的一件事。

Tip

Bootstrap 3.x才剛推出，目前線上資源與工具相對較少。這裡主要是說明使用Bootstrap可以擁有快速換版或套版的好處。對於已導入使用Bootstrap 3.x版的讀者也可以使用 https://bootswatch.com/ 來取得免費3.x版本CSS檔案來套版。

Tip : 如果需要更專業效果的Bootstrap版面，國外也有很多專業的Bootstrap樣版設計公司，例如：https://wrapbootstrap.com/可以採購。注意，Bootstrap的CSS樣版版本。

Note : Visual Studio 2013 RC – WebForms範例專案檔：在此下載。

升級Bootstrap 2.x至3.x

Internet Explorer相容性

Bootstrap 2.x版支援Internet Explorer 7以上，Bootstrap 3.x版支援Internet Explorer 8和9以上，但許多CSS 3屬性，例如，圓角（rounded corners）、陰影（shadows）…等Internet Explorer 8不支援。另外，placeholder屬性也不被以上兩個版本所支援。

Note: Internet Explorer 8需要額外引用respond.js以啟用媒體查詢的支援。

Bootstrap 3.x不支援舊的Internet Explorer相容模式（Compatibility Modes），你必須確定Internet Explorer使用最新的呈現模式（Rendering mode）或是在網頁指定以下的<meta>標籤：

升級專案至Bootstrap 3.x

如果現有一個專案是使用Bootstrap 2.x來設計，以下將示範如何快速升級Bootstrap 2.x到3.x。以下以ASP.NET MVC 5專案示範。

透過Visual Studio 2013 新增一個MVC 5專案（模擬Bootstrap 2.x專案）：

圖六

MVC 5專案與Web Forms專案因為採用相同的Bootstrap支援，預設版面呈現會是一模一樣。

首先透過NuGet來升級Bootstrap套件：

圖七

升級至Bootstrap 3.0.0後重新執行應用程式：

圖八

我們可以發現版面內容都亂掉了，這是因為我們只更新Bootstrap.css的內容，但網頁內的CSS的class內容未更新至對應Bootstrap 3.0.0的class。

更新至Bootstrap 3.0.0的class

更新Bootstrap 2.x的class至3.x的class方式有二種：

手動更新
工具更新

手動更新

各位可以參考Bootstrap官方文件（https://getbootstrap.com/getting-started/#migration）來進行Bootstrap 2.x轉移至Bootstrap 3.0的動作。手動更新必須一一比對所有頁面class屬性的內容，異動修改容易出錯，比較是不建議的方式。

工具更新

透過轉換工具的幫忙，幫我們直接把文件中https://getbootstrap.com/getting-started/#migration對應的class內容由Bootstrap 2.x修改為3.0的內容。讀者可以到https://upgrade-bootstrap.bootply.com/，將原始的Bootstrap 2.x的內容貼至轉換區，即可進行轉換的工作。

首先將“~/Views/Shared/_Layout.cshtml”的body元素下所有內容貼至轉換區：

轉換前：

</button>

@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "brand" })

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

@Html.Partial("_LoginPartial")

</div>

@RenderBody()

<hr />

<p>© @DateTime.Now.Year - My ASP.NET Application</p>

</footer>

</div>

轉換後：

</button>

</div>

@Html.ActionLink("Application name", "Index", "Home", null, new

{

@class

= "navbar-brand"

})

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>@Html.Partial("_LoginPartial")

</div>

@RenderBody()

<hr />

<p>© @DateTime.Now.Year - My ASP.NET Application</p>

</footer>

</div>

重新執行應用程式：

圖九

上方巡覽列已套用Bootstrap 3.0的規則。

接下來將”~/Views/Home/Index.cshtml“內所有HTML元素一樣貼至轉換區進行轉換為Bootstrap 3.0規則：

轉換前：

<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>

<p><a href="https://asp.net" class="btn btn-primary btn-large">Learn more »</a></p>

</div>

<h2>Getting started</h2>

<p>ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that

enables a clean separation of concerns and gives you full control over markup

for enjoyable, agile development.</p>

<p><a class="btn" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>

</div>

<h2>Get more libraries</h2>

<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>

<p><a class="btn" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>

</div>

<h2>Web Hosting</h2>

<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>

<p><a class="btn" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>

</div>

轉換後：

<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications

using HTML, CSS and JavaScript.</p>

<p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a>

</p>

</div>

<h2>Getting started</h2>

<p>ASP.NET MVC gives you a powerful, patterns-based way to build dynamic

websites that enables a clean separation of concerns and gives you full

control over markup for enjoyable, agile development.</p>

<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a>

</p>

</div>

<h2>Get more libraries</h2>

<p>NuGet is a free Visual Studio extension that makes it easy to add, remove,

and update libraries and tools in Visual Studio projects.</p>

<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a>

</p>

</div>

<h2>Web Hosting</h2>

<p>You can easily find a web hosting company that offers the right mix of

features and price for your applications.</p>

<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a>

</p>

</div>

重新執行應用程式：

圖十

內文部分也已套用新的Bootstrap 3.0規則。其他頁面以此類推。

Note: https://upgrade-bootstrap.bootply.com/目前只進行主要CSS轉換，並不是所有對應的CSS都會轉換。

Note : Visual Studio 2013 RC – MVC 5範例專案檔：請於此下載。

小結

Visual Studio 2013 RTM將全面採用Bootstrap 3.x框架技術，Bootstrap解決了許多傳統開發人員的不熟悉CSS，或是版面Layout的困難點，這些問題都能快速透過Bootstrap來突破。

另外，Bootstrap 3.x多元的元件和高互動性的jQuery外掛，更為開發人員快速提供一個解決方案，讓開發人員接觸到“前端“這兩個字時不再害怕。

參考資料

l https://kkbruce.tw (Bootstrap中文教學)

l https://bootswatch.com/2/

l https://getbootstrap.com/getting-started/\#migration

l https://upgrade-bootstrap.bootply.com/

延伸閱讀

Responsive Web Design 響應式設計及 ASP.NET版面魔法師 – Bootstrap

Twitter Bootstrap

Bootstrap含有什麼？

Bootstrap的快速支援響應式頁面能力

Bootstrap快速套版能力

升級Bootstrap 2.x至3.x

Internet Explorer相容性

升級專案至Bootstrap 3.x

更新至Bootstrap 3.0.0的class

手動更新

工具更新

小結

參考資料

整合社交驗證及開發Facebook App – 使用ASP.NET及 Visual Studio 2013

進擊的 ASP.NET Web API 2 巨人 – 打造支援各種裝置及平台的服務

One ASP.NET及完美的開發體驗 - ASP.NET MVC 5

Additional resources