Bootstrap 3:基本概念、安裝、Grid System

by vivid 11. 三月 2015 09:00

.NET Magazine國際中文電子雜誌
者:高光弘
稿:張智凱
文章編號:N150315801
出刊日期:2015/3/11
開發工具:Visual Studio 2013 Ultimate Update 4
版本:.NET Framework 4.5.5x

Bootstrap是當前非常熱門的一個前端網頁開發使用的Framework。對於不太擅長Javascript、CSS的開發人員,又要負責建立同時適合不同裝置上,使用瀏覽器都可以適當呈現的頁面,提供了一個解決方案。

Responsive Web Design

在開始使用Bootstrap前,開發人員需要先瞭解一下,什麼是Responsive Web Design。Responsive Web Design簡稱RWD,是一種網頁設計方式。讓同一個網頁無論在是傳統的桌上型環境或是現在最流行的智慧型手機。都可以適當呈現網頁內容。在技術上,如果要實踐RWD,可以使用CSS3的Media Query來達成。RWD的重點在於如何對目標的裝置排列內容。像桌上型的瀏覽器,比較適合水平排列內容。

clip_image002

1內容以水平方式排列。

而行動裝置則比較適合以堆疊的方式排列內容。

clip_image004

2內容以堆疊方式排列。

Media Query

Media Query是CSS3的Module之一,可以根據不同條件套用不同的CSS,當然裝置的寬度也可以當作條件,例如:。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        div{
            border:3px solid;
        }

        @media screen and (max-width:480px){
            div {
                border: none;
                background-color:yellow;
            }
        }
    </style>
</head>
<body>
    <div>…</div>
</body>
</html>

當瀏覽器寬度超

過480px時,其結果為:

clip_image006

3 未套用Media Query

當瀏覽器寬度小於等於480px時,其結果為:

clip_image008

4 套用Media Query

根據不同的裝置的寬度,使用Media Query可以套用所需要的CSS,進一步讓網頁做最適當的畫面呈現。

Bootstrap

Bootstrap是一個使用HTML5、CSS3、Javascript來開發Responsive、Mobile First網站的Framework。其官方網址為http://getbootstrap.com

 

安裝Bootstrap

安裝Bootstrap的方式除了從官網下載以外,也可以利用Visual Studio的NuGet來進行安裝。兩者的差異,主要在於官網本身沒有主動提供jQuery的程式碼。需要下載Bootstrap之外,還要額外下載jQuery。而使用NuGet安裝Bootstrap時,NuGet除了會安裝Bootstrap也會安裝jQuery。從官網下載的的檔案結構會包含Bootstrap樣式表、Bootstrap Javascript檔,還有Web Font字型檔用來顯示一些簡易的Icon圖示。

clip_image010

5 從官網下載的Bootstrap

使用NuGet安裝的時候,要注意版本。還有依存的jQuery。

clip_image012

6 使用NuGet安裝Bootstrap

比起從官網下載的內容,多了jQuery。

clip_image014

7 NuGet安裝的Bootstrap

建立一個基本的Bootstrap網頁

安裝完Bootstrap之後,在現有的網頁要套用Bootstrap的話,在<head>內引用Bootstrap的樣式表,在</body>前依序引用jQuery和Bootstrap的Javascript檔。為了測試Bootstrap是否套用成功,可以在<body>下,加入一個超連結,該超連結引用Bootstrap的btn及btn-primary類別。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>  
    <a href="http://www.getbootstrap.com" class="btn btn-primary">Bootstrap</a>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
</html>

在瀏覽器檢視的結果,應該可以看到超連結變成按鈕。

clip_image016

8 成功套用Bootstrap

Grid System

Grid System是Bootstrap的頁面配置系統,頁面由Row和Column組合,每個Row最多可以有12個Column。使用Bootstrap建立Responsive網頁的方式並不需要直接使用Media Query,利用Grid System就可以輕易做到。開發人員只需要將原本的網頁內容塞到Column內,再選擇適當的Column類別。在不同裝置上的Column定義,請參考下表:

clip_image018

如果選擇在桌上型的環境以水平方式排列內容,而在手機和平板的環境,則以堆疊方式排列內容時,使用col-md-開頭的類別再配合上Column的數字。例如:col-md-9的9代表9個Column長度,col-md-3的3則是代表3個Column長度。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <link href="Content/bootstrap.css" rel="stylesheet" />
      <style>
        .col1 {
            background-color: yellow;
        }

        .col2 {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9 col1">col 1</div>
            <div class="col-md-3 col2">col 2</div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
</html>

 

 

使用瀏覽器執行時,當瀏覽器的寬度大於等於992px,內容以水平方式排列,比例為9:3。

clip_image020

9 瀏覽器的寬度大於等於992px

使用瀏覽器執行時,當瀏覽器的寬度小於992px時,內容以堆疊方式排列。

clip_image022

10 瀏覽器的寬度小於992px

在不同裝置作不同的頁面配置的做法

利用Grid System預先定義的Column類別,的確可以讓頁面在符合條件時候水平排列,不符合的時候堆疊排列。如果想要在桌上型的環境上水平排列3個內容,平板的環境上排列2個內容。手機的環境才堆疊排列,那該如何做?答案是同時套用不同的Column類別。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <h2>post 1</h2>
                <p>...</p>
            </div>
            <div class="col-md-4 col-sm-6">
                <h2>post 2</h2>
                <p>...</p>
            </div>
            <div class="col-md-4 col-sm-6">
                <h2>post 3</h2>
                <p>...</p>
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
</html>

 

在桌上型的環境,其執行結果為每列(Row)排三行(Column)。

clip_image024

11 桌上型的環境。

在平板的環境,其執行結果每列排兩行。

clip_image026

12平板的環境。

手機的環境則是以堆疊方式呈現。

clip_image028

13 手機的環境。

Tags:

.NET Magazine國際中文電子雜誌 | Responsive Web Design | 高光弘 Ray Kao | Bootstrap

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List