使用 Bootstrap 建立一個 RWD Template(Twitter Bootstrap in Responsive Web Design)

使用 Bootstrap 建立一個 RWD Template 的筆記。

使用 Bootstrap 建立一個 RWD Template(Twitter Bootstrap in Responsive Web Design)

過年在家還是持續閱讀、學習。做 RWD 網頁,除了自己建一套樣版或框架外,最方便省時的方法還是用別人已經寫好的工具,例如大名鼎鼎的 Bootstrap。前陣子看到 Udemy 有免費課程帶著走一遍就來聽聽。更多詳細資訊可參考-Twitter Bootstrap in Responsive Web Design,共 15 堂課,解說清楚、免費。

建立方法 / 觀念

一個頁面能成為 RWD,需要 Fluid Layout、Flexible / Fluid Images 與 CSS3 Media Query。

Fluid Layout

傳統的 Fixed Layout 在不同解析度上,是呈現固定寬度的。

Fixed Layout

但這樣的頁面在手機、平板等行動裝置上非常不易閱讀,使用者可能要常常做放大、縮小的動作來觀看網頁內容。因此,我們希望在這些行動裝置上的排版可以不一樣,以適應不同裝置上的瀏覽方式。寬度的設定不再使用 px 等固定單位,而是使用百分比(%)。

Fluid Layout

圖片來源:Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Flexible / Fluid Images

不設定圖片為固定的寬度(例如:width: 100px),而是使用百分比(%),讓圖片隨著容器大小而改變寬高。

img {
  width: 100%;
}

CSS3 Media Query

RWD 中最重要的就是 Media Query,它讓版面在不同解析度下能有不同的呈現。例如:依據不同寬度做不同的調整。

@media (max-width: 768px) {
  .navbar-right form {
    display: none;
  }
}

@media (max-width: 568px) {
  .jumbotron {
    text-align: center;
  }
  footer {
    text-align: center;
  }
}

備註

其它需要注意的地方。

使用 Bootstrap 建立一個 RWD Template

點此看 Demo

建立基本外殼

複製 Bootstrap 的範本作為外殼,範本位置:Basic template,去除不需要的片段,精簡如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Grids

由於在這裡我們希望三個小方塊(box)可以依據解析度而有不同的排列方式,因此使用 Bootstrap 的 Grid System。規則如下:

column 命名規則:

詳細資訊可參考

Panel、Forms、Wells、Footer

另外,我們會再放佔 8 個 Grid 的 Panel(Panel 樣版)、佔 4 個 Grid 的 Form 進去(Form 樣版)、Well(Well 樣版)、Sticky Footer。

因此將以下的三個小方塊、Panel、Form、Well、Sticky Footer 程式碼片段放到樣版中。

<div class="container">
  <div class="row">
    <div class="col-sm-4 panel-item">
      <div class="box">
        <div class="box-heading">
          <img src="images/food_bread.jpg" />
        </div>
        <div class="box-body">
          <h3>Bread</h3>
          <p>
            Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por
            scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe
            solmen in li grammatica, li pro
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 panel-item">
      <div class="box">
        <div class="box-heading">
          <img src="images/food_coffee_beans.jpg" />
        </div>
        <div class="box-body">
          <h3>Coffee Beans</h3>
          <p>
            The European languages are members of the same family. Their separate existence is a
            myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages
            only differ in their grammar.
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 panel-item">
      <div class="box">
        <div class="box-heading">
          <img src="images/food_strawberry.jpg" />
        </div>
        <div class="box-body">
          <h3>Strawberry</h3>
          <p>
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings
            of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence
            in this spot, which was.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading">
          Welcome
        </div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="well">
        <form>
          <div class="form-group">
            <label for="exampleInputName">Name</label>
            <input type="password" class="form-control" id="exampleInputName" placeholder="Name" />
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input
              type="email"
              class="form-control"
              id="exampleInputEmail1"
              placeholder="Enter email"
            />
          </div>
          <div class="form-group">
            <label for="exampleMessage">Message</label>
            <textarea class="form-control" id="exampleMessage" placeholder="Messages"></textarea>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
  <hr />
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>Copyright &copy 2015, Food Sense</p>
      </div>
    </div>
  </footer>
</div>

完整的 HTML Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/custom.css" rel="stylesheet" />
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Food Sense</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">Home<span class="sr-only">(current)</span></a>
            </li>
            <li>
              <a href="#">About</a>
            </li>
            <li class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-expanded="false"
                >Foods<span class="caret"></span
              ></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Bread</a></li>
                <li><a href="#">Coffee Beans</a></li>
                <li><a href="#">Strawberry</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" />
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <li><a href="#">My Account</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-md-7 jumbo-text">
            <h1 class="tagline">Food Sense</h1>
            <p class="lead">A wonderful serenity has taken possession of my entire soul</p>
            <a href="#" class="btn btn-default btn-lg">Read More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-4 panel-item">
          <div class="box">
            <div class="box-heading">
              <img src="images/food_bread.jpg" />
            </div>
            <div class="box-body">
              <h3>Bread</h3>
              <p>
                Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
                Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
                differe solmen in li grammatica, li pro
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-4 panel-item">
          <div class="box">
            <div class="box-heading">
              <img src="images/food_coffee_beans.jpg" />
            </div>
            <div class="box-body">
              <h3>Coffee Beans</h3>
              <p>
                The European languages are members of the same family. Their separate existence is a
                myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages
                only differ in their grammar.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-4 panel-item">
          <div class="box">
            <div class="box-heading">
              <img src="images/food_strawberry.jpg" />
            </div>
            <div class="box-body">
              <h3>Strawberry</h3>
              <p>
                A wonderful serenity has taken possession of my entire soul, like these sweet
                mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm
                of existence in this spot, which was.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8">
          <div class="panel panel-default">
            <div class="panel-heading">
              Welcome
            </div>
            <div class="panel-body">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="well">
            <form>
              <div class="form-group">
                <label for="exampleInputName">Name</label>
                <input
                  type="password"
                  class="form-control"
                  id="exampleInputName"
                  placeholder="Name"
                />
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  placeholder="Enter email"
                />
              </div>
              <div class="form-group">
                <label for="exampleMessage">Message</label>
                <textarea
                  class="form-control"
                  id="exampleMessage"
                  placeholder="Messages"
                ></textarea>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
        </div>
      </div>
      <hr />
      <footer>
        <div class="row">
          <div class="col-lg-12">
            <p>Copyright &copy 2015, Food Sense</p>
          </div>
        </div>
      </footer>
    </div>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

完整的 CSS Code Snippet

雖然使用 Bootstrap 的框架,但還是做了一些客製化調整。

點此看原始檔

預覽圖

Desktop

Twitter Bootstrap in Responsive Web Design - Desktop

Tablet

Twitter Bootstrap in Responsive Web Design - Tablet

Mobile

Twitter Bootstrap in Responsive Web Design - Mobile

以下備註一些相關資訊。

關於 Viewport Meta Tag

Viewport Meta Tag 並非 W3C 標準的標籤,但仍廣泛使用。格式為

<meta name="viewport" content="" />

屬性 content 的值可為

範例:設定寬度為 320px

<meta name="viewport" content="width=320px" />

範例:設定寬度為裝置的寬度

<meta name="viewport" content="width=device-width" />

範例:文檔的初始比例,設定縮放大小為 1 倍。注意,1 是表示 100%,而填寫範圍為 0.1 ~ 10。

<meta name="viewport" content="initial-scale=1" />

範例:設定縮放大小最大為 1 倍,但使用此設定,使用者會無法藉由放大縮小來看頁面的內容

<meta name="viewport" content="maximum-scale=1" />

範例:設定寬度為裝置的寬度、縮放大小為 1 倍

<meta name="viewport" content="width=device-width,initial-scale=1" />

關於<meta http-equiv="X-UA-Compatible" content="IE=edge">

有什麼最新的版本 IE,就用什麼版本的標準模式。

相關可參考

建立自己的 Grid System

使用框架 Twitter BootstrapFoundation 當然非常方便,但我們往往因為需求而需要大量客製化,如果使用框架反而造成太多限制,不如自己寫個 Grid System 就好。這裡有一篇教學文章可參考-Creating Your Own CSS Grid SystemSource Code & Demo

再次強調 Mobile 看網頁的用戶實在太多了,因此 Mobile First 逐漸形成趨勢。而 Google 手機搜尋結果將把 Mobile Usability 當成其中一個評斷標準。如果希望 2015/04/21 後能看到自己的網站出現在手機搜尋結果上,可用工具檢測看看是否符合官方標準。

相關可見-Google To Use Mobile Usability As A Ranking Factor In Mobile Search Results

推薦閱讀

工具推薦

開發工具

測試工具

設計工具

框架

樣版、元件


這篇文章的原始位置在這裡-使用 Bootstrap 建立一個 RWD Template(Twitter Bootstrap in Responsive Web Design)

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。

Bootstrap Media Query Responsive Web Design 響應式網頁