使用 Bootstrap 和 HTML5 Boilerplate 開始一個項目續

在前面我用 Bootstrap 和 HTML5 Boilerplate 搭建了一個項目基礎框架，可是還只是空白一片，沒有什么實際內容，現在可以開始向里面增加內容了。回到那個項目起點 index.html，一開始是給文檔設置一個標題，就隨隨便便取一個好了：

<title>有標題文檔</title>

真的取得很隨意，不要太認真了，接下來添加以下頁面主體內容：

1. 一個包含 logo 和導航的 banner
2. 一個包含主要內容的 main 元素
3. 一個包含版權信息和社交鏈接的頁腳

把在 index.html 中找到的下面這段預留文字刪掉：

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

替換成下面的代碼：

<header role="banner">
  <nav role="navigation">
  </nav>
</header>
<main role="main">
  <h1>Main Heading</h1>
  <p>Content specific to this page goes here.</p>
</main>
<footer role="contentinfo">
  <p>Copyright © Company Name</p>
</footer>

一個最簡單的基本頁面結構已經有了，這里我使用了 header, main, footer 等元素，這些語義元素是 HTML5 規范增加的，已經得到現代瀏覽器的廣泛支持，所以可以放心地使用，如果還停留在滿屏 div 的時代，恐怕其他小伙伴都不願意和我一起玩耍了，IE 8（及以下）不能識別這些元素，因而不能對這些元素應用樣式，但是我的項目中由於引入了 Modernizr.js 腳本，從而使 IE8 可以支持這些元素，當然這還得建立在用戶啟用了 javaScript 的前提下，如果沒有，那就比較糟糕了，不過這種情況少之又少，但也不能完全忽略，所以可以為沒有啟用 javaScript 的瀏覽器准備一些后備內容，比如，給出一個鏈接跳轉至沒有 HTML5 元素的版本。role 屬性屬於 WAI-ARIA 規范的 Landmark Roles/地標角色部分，旨在告訴用戶代理這個元素扮演的角色，例如屏幕閱讀器遇到包含 role="navigation" 的頁面上的一個 HTML 元素，屏幕閱讀器將知道此 HTML 元素用於導航。現在，我想要添加一個導航條，剛好 Bootstrap 有這個組件，因此我就把 Bootstrap 的示例代碼直接搬過來了，以下是 header 部分代碼：

<header role="banner">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Project name</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

仔細分析上述代碼不難發現 navbar 就是導航條組件的主要 class，navbar-default 是外觀 class，另外還有一種外觀 navbar-inverse 是一種反色的效果，如果都不喜歡，可以修改 CSS 文件把默認樣式改掉(暫時不推薦這樣做)，也可以自己定義一個 navbar-awesome 類或者其它名字也行（awesome 在我的字典里就是高大上的意思），再添加上漂亮的樣式；而 navbar-static-top 就是位置樣式，表示靜態位於頂部，隨滾動條滾動，另外還有兩個位置樣式，navbar-fixed-top 和 navbar-fixed-bottom 顧名思義，就是固定於頂部和底部的意思了，完美地做到了外觀樣式與位置樣式分離，這真是極好的！保存，在瀏覽器中打開后就像下面這樣：

非常漂亮！為了給導航條增加響應式特性，我還得參考一下 Bootstrap 官網文檔，導航條，所以再把 .navbar-header 修改如下：

<div class="navbar-header">
  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html">Project name</a>
</div>

data 屬性是 HTML5 規范里增加的一個自定義屬性的方式，data- 后面可以跟任意合法名字，任意合法值，推薦使用這種方式給 HTML 元素添加自定義屬性，以避免和未來新增的屬性命名沖突，同時，這樣也能通過驗證。

<div data-xxx="xxx">

data-toggle="collapse" 屬性是 Bootstrap 的 collapse.js 插件定義的使用方式，所有 Bootstrap 插件都可以通過 data 屬性 API 來使用，而 data-target 屬性的值則表示了響應該插件功能的目標元素的 CSS 選擇器，因此，使用這個插件只需要添加幾個屬性就可以了，一行 javaScript 代碼都不需要寫。根據 data-target 屬性的值，我要再添加一個 class="navbar-collapse" 的元素來響應這個插件的功能，將已有的鏈接列表包裝一個 div 並添加上需要的 class 就可以了：

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    ...
  </ul>
</div><!-- end .navbar-collapse -->

使用 Firefox 15+ 的響應式設計視圖（Ctrl + Shift + M）打開頁面並逐漸縮小窗口寬度，可以看到當頁面寬度小於 768px 的時候（768px 是 Bootstrap 定義的小屏幕設備和超小屏幕設備之間的臨界點），導航鏈接消失不見同時右上角多了一個按鈕：

點擊右上角按鈕，導航鏈接以另外一種形式展現出來：

這樣，一個炫酷的響應式導航條就算基本完成了！接着在導航下面添加一個圖片輪播的效果，首先得准備好幾張圖片，OK，參考bootstrap官網的樣例，將 main 元素里面的內容替換為以下代碼：

<div class="carousel slide" data-ride="carousel" id="homepage-feature">
  <ol class="carousel-indicators">
    <li class="active" data-target="#homepage-feature" data-slide-to="0">
    <li data-target="#homepage-feature" data-slide-to="1">
    <li data-target="#homepage-feature" data-slide-to="2">
    <li data-target="#homepage-feature" data-slide-to="3">
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img alt="picture" src="img/picture1.jpg">
    </div>
    <div class="item">
      <img alt="picture" src="img/picture2.jpg">
    </div>
    <div class="item">
      <img alt="picture" src="img/picture3.jpg">
    </div>
    <div class="item">
      <img alt="picture" src="img/picture4.jpg">
    </div>
  </div><!-- end .carousel inner -->
  <a class="left carousel-control" data-slide="prev" href="#homepage-feature">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" data-slide="next" href="#homepage-feature">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div><!-- end .carousel -->

同樣的，不需要寫一行 javaScript 代碼，就能很好地運行！

我用的是一張什么內容都沒有的灰色圖片，所以看起來是這樣，也可以給每個 .item 添加一些描述性的文字：

<div class="item">
  <img alt="..." src="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

接下來再添加一個三列的內容展示：

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h2>Welcome!</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">See our portfolio</a></p>
    </div>
    <div class="col-sm-4">
      <h2>Recent Updates</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">See what's new!</a></p>
    </div>
    <div class="col-sm-4">
      <h2>Our Team</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">Meet the team!</a></p>
    </div>
  </div><!-- end .row -->
</div><!-- end .container -->

這里使用了 Bootstrap 自帶的12列響應式網格系統，.col-sm-4 表示一個內容塊占據4列：

當窗口寬度小於 768px 的時候：

響應式的布局，非常好！可是我並不想使用類似 .col-sm-x 之類的 class，因為如果哪天我不想一行放3列了，我想一行放2列，那我豈不是要把 .col-sm-4 改成 .col-sm-6？未完待續

資源列表

• Bootstrap
• HTML5 Boilerplate
• Modernizr

參考資料

Bootstrap Site Blueprints: Design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Whitley