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架構下要進行套版或換版是相當容易的一件事。現在馬上來為剛剛建立的專案進行換版的動作。

 

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

 

 

圖五

 

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

 

Tip

Bootstrap 3.x才剛推出,目前線上資源與工具相對較少。這裡主要是說明使用Bootstrap可以擁有快速換版或套版的好處。對於已導入使用Bootstrap 3.x版的讀者也可以使用 http://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方式有二種:

  1. 手動更新
  2. 工具更新

手動更新

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

工具更新

透過轉換工具的幫忙,幫我們直接把文件中http://getbootstrap.com/getting-started/#migration對應的class內容由Bootstrap 2.x修改為3.0的內容。讀者可以到http://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>&copy; @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>&copy; @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="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</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="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</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="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</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="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</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="http://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="http://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="http://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="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a>

        </p>

    </div>

</div>

 

重新執行應用程式:

 

 

圖十

 

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

 

Note: http://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   http://kkbruce.tw (Bootstrap中文教學)

l   http://bootswatch.com/2/

l   http://getbootstrap.com/getting-started/#migration

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

 

 

 

延伸閱讀

 

Comments (0)

Skip to main content