響應式網頁設計-Bootstrap for ASP.NET WebForms

by vivid 18. 十二月 2013 13:24

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N131214301
出刊日期:2013/12/18
開發工具:Visual Studio 2013 Ultimate
版本:.NET Framework 4.5.1

Bootstrap是一個開放原始程式碼(Open Source)的前端開發框架(front-end framework),用於建立網站應用程式。由在Twitter工作的Mark Otto與Jacob Thornton在2011年8月發明出來,它包含許多使用HTML與CSS樣式設計的範本,進行文字編排、表單、網站導覽…等網站功能的設計,以及一些好用的JavaScript Plugin,支援響應式網頁設計(Responsive Web Design)。

使用Bootstrap的好處是,程式設計師或美術設計師不用浪費時間去撰寫複雜的CSS,可以利用Bootstrap內建的CSS樣式來快速建立美觀的網頁。同時Bootstrap的官方網站也提供許多網頁的樣版,您可以以這些樣版為基礎來設計網頁,參見http://getbootstrap.com/getting-started/。

本篇文章主要是給ASP.NET WebForms的程式設計師一個參考,如何利用Visual Studio 2013開發工具將Bootstrap的功能加入ASP.NET WebForms的網頁中,並介紹Bootstrap的基本設計來節省網頁設計時間。

在Visual Studio 2013開發工具中,內建的ASP.NET網站與ASP.NET Web應用程式範本,便是使用Bootstrap來建立的。以下以ASP.NET網站為範例,先建立一個ASP.NET Empty Web Site,從Visual Studio 2013開發工具「File」-「New」-「Web Site」,選取「ASP.NET Empty Web Site」,請參考下圖所示::

clip_image003

圖 1:建立一個ASP.NET Empty Web Site。

安裝Bootstrap

在ASP.NET 網站中需要將Bootstrap的相關檔案加入,您可以手動從官網下載,然後將必要檔案加入網站中。不過在Visual Studio 2013開發工具中有更簡便的做法,利用NuGet管理工具來下載。從Visual Studio 2013 「Solution Explorer」- 網站名稱上方按滑鼠右鍵,選取快捷選單上的「Manage NuGet Packages」,開啟對話盒,搜尋「Bootstrap」然後按「Install」進行下載,請參考下圖所示:

clip_image005

圖 2:下載Bootstrap。

安裝完成之後,Visual Studio 2013會在網站中加入三個資料夾:Content、fonts、Scripts。Content資料夾中包含Bootstrap內建的樣式,以及預設的佈景主題CSS檔案。Fonts資料夾則存放適用於各種不同瀏覽器的字型檔案,內含Bootstrap內建的圖示。Scripts資料夾中則包含Bootstrap程式庫以及相依的jQuery程式庫,請參考下圖所示:

clip_image007

圖 3:下載Bootstrap。

安裝Respond JS(選擇性)

下一步是使用NuGet安裝Respond JS,請參考下圖所示,這個程式庫的主要用途是為了要讓一些舊版的IE瀏覽器 (IE 8之前版本) 能夠支援CSS3的Media Query以便設計符合Responsive Web Design的網頁。若沒有舊版IE瀏覽器的包袱,這個步驟可以跳過。

clip_image009

圖 4:安裝Respond JS。

安裝完成之後,在Scripts資料夾中就會新增一個respond.js與respond.min.js檔案。

安裝html3shiv(選擇性)

接下來安裝html3shiv,請參考下圖所示。html5shiv.js則同樣是讓舊版的IE能夠認識一些新的HTML標籤。若沒有舊版IE瀏覽器的包袱,這個步驟可以跳過。

clip_image011

圖 5:安裝html3shiv。

安裝完成之後,在Scripts資料夾中就會新增一個html5shiv.js檔案。

設計ASPX網頁

接下來我們便可以設計支援Bootstrap的ASP.NET Web Forms網頁,從「Solution Explorer」- 網站根路徑 - 按滑鼠右鍵,從選單中選取「Add」-「Add New Item」,接著在「Add New Item」對話盒中,選取Visual C#的「Web Form」,清除選取右下方「Place code in separate file」核取方塊。設定名稱為「Default.aspx」,按下「Add」按鈕,Visual Studio就會自動在專案中建立一個Default.aspx檔案,請參考下圖所示:

clip_image013

圖 6:設計ASPX網頁。

加入自訂樣式表,Custom.css檔案,以存放自訂的樣式,若沒有自訂樣式的需求,此步驟可以省略。從「Solution Explorer」- 「Content」 - 按滑鼠右鍵,從選單中選取「Add」-「Add New Item」,接著在「Add New Item」對話盒中,選取「Style Sheet」設定名稱為「Custom.css」,按下「Add」按鈕,Visual Studio就會自動在專案中建立一個Custom.css檔案,請參考下圖所示:

clip_image015

圖 7:加入樣式表。

基本的網頁結構

我們先來設計一個基本的ASP.NET WebForms (ASPX) 網頁結構,參考下列程式碼,在</body>標籤結尾的上方,引用jQuery以及bootstrap程式庫,而在<head>標籤中設定viewport以及引用bootstrap、自訂的Custom.css 樣式。此外為了舊版的ie 瀏覽器 (ie9之前的版本) 使用Conditional Comments語法([if lt IE 9])引用respond.min.js與html5shiv.js檔案,順帶一提,Conditional Comments語法在ie10版以後已不再支援。完成這個基本的網頁結構,以後便可將此範本網頁當作每一個支援Bootstrap技術的樣版網頁。

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->
</head>
<body>

    <form id="form1" runat="server">
        <div>
            <h1>My Bootstrap Web Site!</h1>
        </div>
    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

這個網頁只有在<form>標籤之中的<h1>標籤內顯示網站的標題訊息。檢視目前Default.aspx。從「Solution Explorer」- 找到「Default.aspx」- 按滑鼠右鍵,從選單中選取「View In Browser」,參考執行畫面如下:

clip_image003[4]

圖 8:引用Bootstrap的基本ASPX網頁。

使用預設的Grid系統設計網頁版面

Bootstrap內建一個Grid系統,可以幫助我們節省設計網頁版面的時間。根據官網文件的說明:「http://getbootstrap.com/css/#grid」,預設Bootstrap 3的Grid系統將網頁劃分為12個欄位,根據未來顯示裝置或瀏覽器的寬度,提供四種版面尺寸:

  • · Extra small devices Phones (<768px):永遠以水平方式呈現。
  • · Small devices Tablets (≥768px):小於邊界值(768px)會自動以垂直方向堆疊顯示。
  • · Medium devices Desktops (≥992px) :小於邊界值(992px)會自動以垂直方向堆疊顯示。
  • · Large devices Desktops (≥1200px) :小於邊界值(1200px)會自動以垂直方向堆疊顯示

Bootstrap 3事先定義了一些CSS樣式與Media Query語法來搭配Grid系統的設計。 首先我們以基本網頁為基礎,在網頁之中加入一些基本的HTML內容:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->
</head>
<body>

    <form id="form1" runat="server">
      
<!-- row 0 -->
        <header>
            <div>
                <a href="Default.aspx">
                    <img src="Content/images/ucom_logo.png" /></a>
            </div>
        </header>

        <div>
            <!-- row 1 -->
            <div>
                <div>
                    <h1>.NET Magazine國際中文電子版</h1>
                    <p>.NET Magazine國際中文電子版將是國內專注在介紹.NET 相關技術的電子性期刊,範圍將涵蓋.NET開發技術如ASP.NET、ADO.NET技術;.NET程式開發語言C#、Visual Basic.NET…等等。.NET Magazine國際中文電子版以技術取向、資訊取向,提供您完整的 .NET技術學習資源。</p>
                </div>
            </div>

            <!-- row 2 -->
            <div>
                <div>
                    <p>
                        <img src="Content/images/Apple-icon.png" />
                    </p>
                    <h2>Bootstrap</h2>
                    <p>
                        Bootstrap是一個開放源碼的前端開發框架(front-end framework),用於建立網站應用程式。
                    </p>
                    <p>
                        <a href="
http://getbootstrap.com/">Learn more &raquo;</a>
                    </p>
                </div>
                <div>
                    <p>
                        <img src="Content/images/Bauble-icon.png" />
                    </p>
                    <h2>Grid系統</h2>
                    <p>
                        根據官網文件的說明預設Bootstrap 3的Grid系統將網頁劃分為12個欄位。並事先定義了一些CSS樣式來設計Grid。
                    </p>
                    <p>
                        <a href="
http://getbootstrap.com/css/#grid">Learn more &raquo;</a>
                    </p>
                </div>
                <div>
                    <p>
                        <img src="Content/images/Moon-icon.png" />
                    </p>
                    <h2>ASP.NET</h2>
                    <p>
                        ASP.NET 是微軟的網站開發技術,包含Web Forms、Web Pages、MVC、Web API等等功能。
                    </p>
                    <p>
                        <a href="
http://www.asp.net/web-forms">Learn more &raquo;</a>
                    </p>
                </div>
                <div>
                    <p>
                        <img src="Content/images/Reindeer-icon.png" />
                    </p>
                    <h2>Visual Studio 2013</h2>
                    <p>
                        Visual Studio 2013是微軟的視覺化開發工具,可以開發網站、服務、視窗...等各類型的程式碼。
                    </p>
                    <p>
                        <a href="
http://www.visualstudio.com/downloads/download-visual-studio-vs">Learn more &raquo;</a>
                    </p>
                </div>

            </div>
            <!-- row 3 -->
            <footer>
                <div>
                    <small>本網站之內容屬於.NET Magazine 國際中文電子版,非經書面同意禁止一切複製使用
                    </small>
                    <p><small>網站內其他授權公司與產品Logo,分屬其原公司所有,CopyRight©</small></p>
                </div>
            </footer>
        </div>

    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>


此範例執行的結果如下圖所示:

clip_image005[4]

圖 9:未套用Bootstrap的網頁。

加入Bootstrap樣式

接下來我們來加入一些Bootstrap樣式,以及自訂的樣式,首先在Custom.css樣式表檔案之中,加入以下CSS,設定header的背景顏色:

header {

background-color:#1e82b7;

}

根據下列程式碼紅字的部分修改網頁,套用Bootstrap樣式:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->
</head>
<body>

     <form id="form1" runat="server">
        <!-- row 0 -->
        <header class="row">
            <div class="col-lg-12">
                <a href="Default.aspx">
                    <img src="Content/images/ucom_logo.png" /></a>
            </div>
        </header>

        <div class="container">
            <!-- row 1 -->
              <div class="row">
                <div class="col-lg-12">
                    <h1>.NET Magazine國際中文電子版</h1>
                    <p>.NET Magazine國際中文電子版將是國內專注在介紹.NET 相關技術的電子性期刊,範圍將涵蓋.NET開發技術如ASP.NET、ADO.NET技術;.NET程式開發語言C#、Visual Basic.NET…等等。.NET Magazine國際中文電子版以技術取向、資訊取向,提供您完整的 .NET技術學習資源。</p>
                </div>
            </div>
            <!-- row 2 -->
            <div class="row">
                <div class="col-lg-3">
                    <p>
                        <img src="Content/images/Apple-icon.png" />
                    </p>
                    <h2>Bootstrap</h2>
                    <p>
                        Bootstrap是一個開放源碼的前端開發框架(front-end framework),用於建立網站應用程式。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-3">
                    <p>
                        <img src="Content/images/Bauble-icon.png" />
                    </p>
                    <h2>Grid系統</h2>
                    <p>
                        根據官網文件的說明預設Bootstrap 3的Grid系統將網頁劃分為12個欄位。並事先定義了一些CSS樣式來設計Grid。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/css/#grid">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-3">
                    <p>
                        <img src="Content/images/Moon-icon.png" />
                    </p>
                    <h2>ASP.NET</h2>
                    <p>
                        ASP.NET 是微軟的網站開發技術,包含Web Forms、Web Pages、MVC、Web API等等功能。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.asp.net/web-forms">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-3">
                    <p>
                        <img src="Content/images/Reindeer-icon.png" />
                    </p>
                    <h2>Visual Studio 2013</h2>
                    <p>
                        Visual Studio 2013是微軟的視覺化開發工具,可以開發網站、服務、視窗...等各類型的程式碼。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.visualstudio.com/downloads/download-visual-studio-vs">Learn more &raquo;</a>
                    </p>
                </div>

            </div>
            <!-- row 3 -->
            <footer class="row">
                <div class="container">
                    <small>本網站之內容屬於.NET Magazine 國際中文電子版,非經書面同意禁止一切複製使用
                    </small>

                    <p><small>網站內其他授權公司與產品Logo,分屬其原公司所有,CopyRight©</small></p>
                </div>
            </footer>
        </div>

    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>


此範例執行的結果如下圖所示,當視窗最大化(解析度為1400*900)時,可以同時顯示四欄資料,請參考下圖所示:

clip_image007[4]

圖 10:第一個套用Bootstrap的網頁。

當縮小畫面小於1200臨界值時,會自動以垂直方向堆疊顯示,請參考下圖所示:

clip_image009[4]

圖 11:畫面小於臨界值自動以垂直方向堆疊顯示。

在此範例重點如下:

  • 「<!-- row 0 -->」註解下方,Header標籤套用「class="row"」;其中的<div>套用「class="col-lg-12"」,表示表頭(header)只顯示為一欄(合併12欄)。
  • 「<!-- row 1 -->」註解下標示「class="row"」的div標籤內有一個子div,加上「class="col-lg-12"」表示資料以12欄合併成一個方式做顯示。
  • 「<!-- row 2 -->」註解下標示「class="row"」的div標籤內有4個子div,加上「class="col-lg-3"」表示資料以三欄合併成一欄方式做顯示。
  • 「<!-- row 3 -->」註解下標示「class="row"」的div標籤內的子div,加上「class="container"」則其中的內容將可套用內建的CSS樣式,加入內距(Padding)的設定。
  • 所有的超連結則加上「class="btn btn-default"」樣式,因此以方型按鈕方式呈現。

為行動裝置加入Grid支援

上述的範例只有考慮到桌上型瀏覽器,一次可以顯示4欄資料,我們可以利用Bootstrap Grid系統為手機(Mobile)、平板(tablet)加上不同版面尺寸的Grid支援。例如根據下列程式碼紅字的部分,修改上述的範例程式碼:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->
</head>
<body>

    <form id="form1" runat="server">
        <!-- row 0 -->
        <header class="row">
            <div class="col-lg-12">
                <a href="Default.aspx">
                    <img src="Content/images/ucom_logo.png" /></a>
            </div>
        </header>

        <div class="container">
            <!-- row 1 -->
            <div class="row">
                <div class="col-lg-12 ">
                    <h1>.NET Magazine國際中文電子版</h1>
                    <p>.NET Magazine國際中文電子版將是國內專注在介紹.NET 相關技術的電子性期刊,範圍將涵蓋.NET開發技術如ASP.NET、ADO.NET技術;.NET程式開發語言C#、Visual Basic.NET…等等。.NET Magazine國際中文電子版以技術取向、資訊取向,提供您完整的 .NET技術學習資源。</p>
                </div>
            </div>
            <!-- row 2 -->
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <p>
                        <img src="Content/images/Apple-icon.png" />
                    </p>
                    <h2>Bootstrap</h2>
                    <p>
                        Bootstrap是一個開放源碼的前端開發框架(front-end framework),用於建立網站應用程式。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <p>
                        <img src="Content/images/Bauble-icon.png" />
                    </p>
                    <h2>Grid系統</h2>
                    <p>
                        根據官網文件的說明預設Bootstrap 3的Grid系統將網頁劃分為12個欄位。並事先定義了一些CSS樣式來設計Grid。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/css/#grid">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <p>
                        <img src="Content/images/Moon-icon.png" />
                    </p>
                    <h2>ASP.NET</h2>
                    <p>
                        ASP.NET 是微軟的網站開發技術,包含Web Forms、Web Pages、MVC、Web API等等功能。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.asp.net/web-forms">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <p>
                        <img src="Content/images/Reindeer-icon.png" />
                    </p>
                    <h2>Visual Studio 2013</h2>
                    <p>
                        Visual Studio 2013是微軟的視覺化開發工具,可以開發網站、服務、視窗...等各類型的程式碼。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.visualstudio.com/downloads/download-visual-studio-vs">Learn more &raquo;</a>
                    </p>
                </div>

            </div>
            <!-- row 3 -->
            <footer class="row">
                <div class="container centered">
                    <small>本網站之內容屬於.NET Magazine 國際中文電子版,非經書面同意禁止一切複製使用
                    </small>

                    <p><small>網站內其他授權公司與產品Logo,分屬其原公司所有,CopyRight©</small></p>
                </div>
            </footer>
        </div>

    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

此範例執行的結果如下圖所示,當視窗最大化(解析度為1400*900)時,可以同時顯示四欄資料,請參考下圖所示:

clip_image011[4]

圖 12:Large devices Desktops。

當縮小畫面小於Large devices Desktops (≥1200px)臨界值時,會符合Medium devices Desktops (≥992px)設定「col-md-4」自動以三欄顯示,多出的一欄自動以垂直方向堆疊顯示,請參考下圖所示:

clip_image013[4]

圖 13:Medium devices Desktops。

當縮小畫面小於Medium devices Desktops (≥992px) 臨界值時,會符合Small devices Tablets (≥768px)設定「col-sm-6」,自動以2欄顯示,多出的2欄被擠到下一行,自動以垂直方向堆疊顯示,請參考下圖所示:

clip_image015[4]

圖 14:Small devices Tablets。

當縮小畫面小於Small devices Tablets (≥768px) 臨界值時,會自動以垂直方向堆疊顯示(一欄) ,請參考下圖所示:

clip_image017[4]

圖 15:一欄。

設定欄位間距

以上個範例而言,若Row 2 欄位之間的距離想要增加,可以利用offset來設定欄位之間的間距。參考以下範例程式碼,設定以col-lg-offset-1,表示間距為一欄:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->
</head>
<body>

    <form id="form1" runat="server">
        <!-- row 0 -->
        <header class="row">
            <div class="col-lg-12">
                <a href="Default.aspx">
                    <img src="Content/images/ucom_logo.png" /></a>
            </div>
        </header>

        <div class="container">
            <!-- row 1 -->
            <div class="row">
                <div class="col-lg-12 ">
                    <h1>.NET Magazine國際中文電子版</h1>
                    <p>.NET Magazine國際中文電子版將是國內專注在介紹.NET 相關技術的電子性期刊,範圍將涵蓋.NET開發技術如ASP.NET、ADO.NET技術;.NET程式開發語言C#、Visual Basic.NET…等等。.NET Magazine國際中文電子版以技術取向、資訊取向,提供您完整的 .NET技術學習資源。</p>
                </div>
            </div>
            <!-- row 2 -->
            <div class="row">
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Apple-icon.png" />
                    </p>
                    <h2>Bootstrap</h2>
                    <p>
                        Bootstrap是一個開放源碼的前端開發框架(front-end framework),用於建立網站應用程式。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Bauble-icon.png" />
                    </p>
                    <h2>Grid系統</h2>
                    <p>
                        根據官網文件的說明預設Bootstrap 3的Grid系統將網頁劃分為12個欄位。並事先定義了一些CSS樣式來設計Grid。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/css/#grid">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Moon-icon.png" />
                    </p>
                    <h2>ASP.NET</h2>
                    <p>
                        ASP.NET 是微軟的網站開發技術,包含Web Forms、Web Pages、MVC、Web API等等功能。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.asp.net/web-forms">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Reindeer-icon.png" />
                    </p>
                    <h2>Visual Studio 2013</h2>
                    <p>
                        Visual Studio 2013是微軟的視覺化開發工具,可以開發網站、服務、視窗...等各類型的程式碼。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.visualstudio.com/downloads/download-visual-studio-vs">Learn more &raquo;</a>
                    </p>
                </div>

            </div>
            <!-- row 3 -->
            <footer class="row">
                <div class="container centered">
                    <small>本網站之內容屬於.NET Magazine 國際中文電子版,非經書面同意禁止一切複製使用
                    </small>

                    <p><small>網站內其他授權公司與產品Logo,分屬其原公司所有,CopyRight©</small></p>
                </div>
            </footer>
        </div>

    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果如下圖所示,一開始瀏覽器畫面最大化時,資料顯示如下:

clip_image019[4]

圖 16:設定間距。

設定圖片支援響應式設計

響應式設計要求圖片能夠根據需求,放大或縮小顯示。因此,我們網頁中的圖片也應該要支援響應式設計。延續上個範例,目前程式執行時,當畫面縮小,圖片不會跟著縮小,例如上方的LOGO右邊顯示不出來,請參考下圖所示:

clip_image021[4]

圖 17:圖片目前不支援響應式設計。

我們只需要為圖片加上img-responsive樣式,例如以下範例程式碼:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->
</head>
<body>

    <form id="form1" runat="server">
        <!-- row 0 -->
        <header class="row">
            <div class="col-lg-12">
                <a href="Default.aspx">
                    <img src="Content/images/ucom_logo.png" class="img-responsive" /></a>
            </div>
        </header>

        <div class="container">
            <!-- row 1 -->
            <div class="row">
                <div class="col-lg-12 ">
                    <h1>.NET Magazine國際中文電子版</h1>
                    <p>.NET Magazine國際中文電子版將是國內專注在介紹.NET 相關技術的電子性期刊,範圍將涵蓋.NET開發技術如ASP.NET、ADO.NET技術;.NET程式開發語言C#、Visual Basic.NET…等等。.NET Magazine國際中文電子版以技術取向、資訊取向,提供您完整的 .NET技術學習資源。</p>
                </div>
            </div>
            <!-- row 2 -->
            <div class="row">
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Apple-icon.png" class="img-responsive" />
                    </p>
                    <h2>Bootstrap</h2>
                    <p>
                        Bootstrap是一個開放源碼的前端開發框架(front-end framework),用於建立網站應用程式。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Bauble-icon.png" class="img-responsive" />
                    </p>
                    <h2>Grid系統</h2>
                    <p>
                        根據官網文件的說明預設Bootstrap 3的Grid系統將網頁劃分為12個欄位。並事先定義了一些CSS樣式來設計Grid。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/css/#grid">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Moon-icon.png" class="img-responsive" />
                    </p>
                    <h2>ASP.NET</h2>
                    <p>
                        ASP.NET 是微軟的網站開發技術,包含Web Forms、Web Pages、MVC、Web API等等功能。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.asp.net/web-forms">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-lg-2 col-lg-offset-1">
                    <p>
                        <img src="Content/images/Reindeer-icon.png" class="img-responsive" />
                    </p>
                    <h2>Visual Studio 2013</h2>
                    <p>
                        Visual Studio 2013是微軟的視覺化開發工具,可以開發網站、服務、視窗...等各類型的程式碼。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.visualstudio.com/downloads/download-visual-studio-vs">Learn more &raquo;</a>
                    </p>
                </div>

            </div>
            <!-- row 3 -->
            <footer class="row">
                <div class="container centered">
                    <small>本網站之內容屬於.NET Magazine 國際中文電子版,非經書面同意禁止一切複製使用
                    </small>

                    <p><small>網站內其他授權公司與產品Logo,分屬其原公司所有,CopyRight©</small></p>
                </div>
            </footer>
        </div>

    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

加入JumboTron

Bootstrap 有一個jumbotron樣式,可以使用一個大區塊用來顯示網站中需要特別強調的重要訊息,例如新問市的產品說明,或顯示重要的注意事項,jumbotron樣式會以醒目的方式將訊息呈現在網頁上。參考以下範例程式碼,其中有一個div標籤套用「class="jumbotron"」,其中包含圖片、文字訊息以及超連結:

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->

</head>
<body>

    <form id="form1" runat="server">
        <div class="container">
            <!-- row 1 -->
            <div class="row">
                <div class="header">
                    <ul class="nav nav-pills pull-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <h3 class="text-muted">.NET Magazine國際中文電子版</h3>
                </div>
            </div>
           <div class="row">
                <div class="jumbotron">
                    <img src="Content/images/ucom_logo.png" class="pull-right img-responsive" />
                    <h1>成為會員</h1>
                    <p>只要填寫電子雜誌的會員帳號密碼,即可快速成為 .NET Magazine 國際中文電子版會員 ,享受新知。</p>
                    <p><a class="btn btn-lg btn-success" href="#" role="button">訂閱</a></p>
                </div>
            </div>
            <!-- row 2 -->
            <div class="row">
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Apple-icon.png" />
                    </p>
                    <h2>Bootstrap</h2>
                    <p>
                        Bootstrap是一個開放源碼的前端開發框架(front-end framework),用於建立網站應用程式。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Bauble-icon.png" />
                    </p>
                    <h2>Grid系統</h2>
                    <p>
                        根據官網文件的說明預設Bootstrap 3的Grid系統將網頁劃分為12個欄位。並事先定義了一些CSS樣式來設計Grid。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/css/#grid">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Moon-icon.png" />
                    </p>
                    <h2>ASP.NET</h2>
                    <p>
                        ASP.NET 是微軟的網站開發技術,包含Web Forms、Web Pages、MVC、Web API等等功能。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.asp.net/web-forms">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Reindeer-icon.png" />
                    </p>
                    <h2>Visual Studio 2013</h2>
                    <p>
                        Visual Studio 2013是微軟的視覺化開發工具,可以開發網站、服務、視窗...等各類型的程式碼。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.visualstudio.com/downloads/download-visual-studio-vs">Learn more &raquo;</a>
                    </p>
                </div>

            </div>
            <!-- row 3 -->
            <footer class="row">
                <div class="container">
                    <small>本網站之內容屬於.NET Magazine 國際中文電子版,非經書面同意禁止一切複製使用
                    </small>

                    <p><small>網站內其他授權公司與產品Logo,分屬其原公司所有,CopyRight©</small></p>
                </div>
            </footer>
        </div>

    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

當網頁執行時,JumboTron會直接佔據12欄的所有空間,以一欄方式顯示。JumboTron內的<img>標籤套用「class="pull-right img-responsive"」,這樣圖片會強制顯示在右邊,套用「img-responsive」圖便便具備響應式效果,請參考下圖所示:

clip_image023[4]

圖 18:JumboTron。

當畫面縮小時JumboTron的區塊也跟著縮小,其中的圖片也會跟著縮小,請參考下圖所示:

clip_image025[4]

圖 19:JumboTron。

加入圖片輪播功能(Carousel)

許多網站網頁會使用圖片輪播(Carousel)效果來強調重要訊息,參考以下網頁的執行結果,網頁中包含三個寬度佔滿視窗的圖片做輪播,圖片的左右出現向左、右的箭頭切換圖片:

clip_image027[4]

圖 20:圖片輪播。

在輪播的圖片中可以設計指示器(Indictor,即圖片中三個小圓點),使用者可以點選指示器切換到下一張圖,請參考下圖所示:

clip_image029[4]

圖 21:點選指示器切換到下一張圖。

在輪播的圖片畫面中的左、右箭頭可以用來做換圖功能,使用者可以點選箭頭切換到上、下一張圖,請參考下圖所示:

clip_image031[4]

圖 22:自訂導覽功能。

範例程式碼參考如下:

 

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website </title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Custom.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="Scripts/html5shiv.js"></script>
        <script src="Scripts/respond.min.js"></script>    
    <![endif]-->

</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <!-- row 1 -->
            <div class="row">
                <div class="header">
                    <ul class="nav nav-pills pull-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <h3 class="text-muted">.NET Magazine國際中文電子版</h3>
                </div>
            </div>
            <div class="row">
                <div>
                    <div id="myCarousel" class="carousel slide">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="Content/images/c1.jpg" />
                            </div>
                            <div class="item">
                                <img src="Content/images/c2.jpg" />
                            </div>
                            <div class="item">
                                <img src="Content/images/c3.jpg" />
                            </div>
                            <div class="item">
                                <img src="Content/images/c4.jpg" />
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                </div>
            </div>
            <!-- row 2 -->
            <div class="row">
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Apple-icon.png" />
                    </p>
                    <h2>Bootstrap</h2>
                    <p>
                        Bootstrap是一個開放源碼的前端開發框架(front-end framework),用於建立網站應用程式。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Bauble-icon.png" />
                    </p>
                    <h2>Grid系統</h2>
                    <p>
                        根據官網文件的說明預設Bootstrap 3的Grid系統將網頁劃分為12個欄位。並事先定義了一些CSS樣式來設計Grid。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://getbootstrap.com/css/#grid">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Moon-icon.png" />
                    </p>
                    <h2>ASP.NET</h2>
                    <p>
                        ASP.NET 是微軟的網站開發技術,包含Web Forms、Web Pages、MVC、Web API等等功能。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.asp.net/web-forms">Learn more &raquo;</a>
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                        <img src="Content/images/Reindeer-icon.png" />
                    </p>
                    <h2>Visual Studio 2013</h2>
                    <p>
                        Visual Studio 2013是微軟的視覺化開發工具,可以開發網站、服務、視窗...等各類型的程式碼。
                    </p>
                    <p>
                        <a class="btn btn-default" href="
http://www.visualstudio.com/downloads/download-visual-studio-vs">Learn more &raquo;</a>
                    </p>
                </div>

            </div>
            <!-- row 3 -->
            <footer class="row">
                <div class="container">
                    <small>本網站之內容屬於.NET Magazine 國際中文電子版,非經書面同意禁止一切複製使用
                    </small>

                    <p><small>網站內其他授權公司與產品Logo,分屬其原公司所有,CopyRight©</small></p>
                </div>
            </footer>
        </div>

    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>


範例中包含一個id為「myCarousel」的div,套用「class="carousel slide"」用來做圖片輪播功能。設定slide樣式的用途是在換圖時,可以有動畫效果。Carousel中包含輪播項目,要輪播的每一張圖片(img)放在標示「class="carousel-inner"」的div內的子div(class="item")之中。套用active樣式的div代表預設要顯示的輪播項目。

指示器則使用標示「class="carousel-indicators"」的ol來設計。其中的li設定data-target指向Carousel的ID (data-target="#myCarousel") 以及data-slide-to,用來指定要跳到Carousel中的輪播項目,從0開始計算。

最後範例內加入自訂的導覽功能,Carousel標籤最後包含兩個<a>連結套用「carousel-control」樣式,套用left樣式的<a>會出現在左邊;同樣的套用right樣式的<a>會出現在右邊。data-slide用來決定跳下一張或上一張圖。另外我們利用<span>顯示Bootstrap內建的圖示左(glyphicon glyphicon-chevron-left)、右(right carousel-control)箭頭圖示。更多的圖示請參考官網:

http://getbootstrap.com/components/

 

參考資源

· 下載Bootstrap:http://getbootstrap.com/

· 下載Visual Studio 2013 Ultimate 試用版:Visual Studio 2013 Ultimate 試用版

評論 (3) -

ryder
ryder Taiwan
2015/11/20 上午 11:46:33 #

安裝html3shiv ???
html5shiv 吧..

作者筆誤 XD !!

回覆

ryder
ryder Taiwan
2015/11/20 上午 11:47:06 #

文章很讚!!

回覆

Vivid
Vivid Taiwan
2015/11/24 下午 02:28:19 #

對耶,明明圖片上寫html5shiv,不知當時哪個眼睛看到html3shiv了

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List