Responsive Web Design 響應式設計及 ASP.NET版面魔法師 – Bootstrap
註: 本篇內容 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>標籤：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
升級專案至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元素下所有內容貼至轉換區：
轉換前：
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "brand" })
<div class="nav-collapse collapse">
<ul class="nav">
<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>
</div>
</div>
</div>
<div class="container">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
轉換後：
<div class="navbar navbar-inverse navbar-fixed-top navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</button>
</div>
<div class="container">
@Html.ActionLink("Application name", "Index", "Home", null, new
{
@class
= "navbar-brand"
})
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<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>
</div>
</div>
<div class="container">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
重新執行應用程式：
圖九
上方巡覽列已套用Bootstrap 3.0的規則。
接下來將”~/Views/Home/Index.cshtml“內所有HTML元素一樣貼至轉換區進行轉換為Bootstrap 3.0規則：
轉換前：
<div class="hero-unit">
<h1>ASP.NET</h1>
<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>
<div class="row">
<div class="span4">
<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>
<div class="span4">
<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>
<div class="span4">
<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>
</div>
轉換後：
<div class="jumbotron">
<h1>ASP.NET</h1>
<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>
<div class="row">
<div class="col-md-4">
<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>
<div class="col-md-4">
<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>
<div class="col-md-4">
<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>
</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://getbootstrap.com/getting-started/\#migration
l https://upgrade-bootstrap.bootply.com/
延伸閱讀