FreeCodeCamp - Responsive Design with Bootstrap

Use Responsive Design with Bootstrap Fluid Containers

現在讓我們回到我們的Cat Photo應用。這次，我們將用流行的響應式框架Bootstrap來美化它。

Bootstrap將會根據你的螢幕的大小來調整HTML元素的大小 —— 強調 響應式設計的概念。

通過響應式設計，你無需再為你的網站設計一個手機版的。它在任何尺寸的螢幕上看起來都會不錯。

你僅需要通過新增下列程式碼到你的HTML開頭來將Bootstrap新增到任意應用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

在此案例中，我們已經幫你把上述程式碼新增到頁面中。

首先，我們需要把所有的HTML內容放在class為container-fluid的div下。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>
<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#">![](/images/relaxing-cat.jpg)</a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>

Make Images Mobile Responsive

首先，在已有的圖片下方新增一張新的圖片。將它的 src屬性設定為 /images/running-cat.jpg。

如果圖片的尺寸剛好等於我們手機的尺寸，那想必是極好的。

謝天謝地，通過Bootstrap，我們要做的只是給圖片新增 img-responsive class屬性。這樣圖片的寬度就能完美地適配你的頁面的寬度了。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text">CatPhotoApp</h2>
  
  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>
  ![](/images/running-cat.jpg)
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Center Text with Bootstrap

既然我們在使用Bootstrap，我們可以通過居中頭部元素來使它看起來更棒。 我們所要做的只是把text-center class屬性新增給 h2 元素。

記住：你可以用空格分開多個class來為同一個元素新增多個 class 屬性， 就像這樣：

<h2 class="red-text text-center">your text</h2>

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Create a Bootstrap Button

Bootstrap有它自己的 button 按鈕風格， 看起來要比預設的按鈕好看得多。

在三隻貓咪圖片下面建立一個新的 button 元素。給它新增 btn class 屬性以及"Like"文字。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <button class="btn">like</button>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Create a Block Element Bootstrap Button

通常情況下，你的 button 元素僅與它所包含的文字一樣寬。通過使其成為塊級元素，你的按鈕將會伸展並填滿頁面整個水平空間，任何在它之下的元素都會跟著浮動至該區塊的下一行。

這張圖闡述了行內元素與塊級元素的區別：

注意，這些按鈕仍然需要 btn class。

新增Bootstrap的 btn-block class 到你的按鈕。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <button class="btn btn-block">Like</button>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Taste the Bootstrap Button Color Rainbow

深藍色btn-primary是你的應用的主要顏色，被用在那些使用者主要採取的操作上。

新增Bootstrap的 btn-primary class 屬性到按鈕標籤上。

注意：這個按鈕仍然需要 btn 和 btn-block 屬性！

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <button class="btn btn-block btn-primary">Like</button>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Call out Optional Actions with Button Info

Bootstrap自帶了一些預定義的按鈕顏色。淺藍色 btn-info被用在那些使用者可能會採取的操作上。

在你的 "Like" 按鈕下面新增一個文字為 "Info" 的塊級Bootstrap按鈕，併為其新增 btn-info 和 btn-block class屬性。

注意：這些按鈕仍然需要 btn 和 btn-block class屬性

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <button class="btn btn-block btn-primary">Like</button>
  <button class="btn btn-block btn-info">Info</button>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Warn your Users of a Dangerous Action

Bootstrap自帶了一些預定義的按鈕顏色。紅色btn-danger被用來提醒使用者該操作具有“破壞性”，例如刪除一張貓的圖片。

建立一個文字為 "Delete" 的按鈕，並且給它新增 class btn-danger。

注意：這些標籤仍然需要 btn 與 btn-block class。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <button class="btn btn-block btn-primary">Like</button>
  <button class="btn btn-block btn-info">Info</button>
  <button class="btn btn-block btn-danger">Delete</button>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap 使用一種響應式網格佈局——可輕鬆實現將多個元素放入一行並指定各個元素的相對寬度的需求。Bootstrap 中大多數的class屬性都可以設定於 div 元素中。

下面這張圖表顯示了 Bootstraps 的12列網格佈局是如何起作用的：

請注意，在這張圖表中，class屬性 col-md-* 正被使用。在這裡，md 表示 medium (中等的)，* 代表一個數字，它指定了這個元素所佔的列寬。通過此圖表的屬性設定可知，在中等大小的螢幕上(例如膝上型電腦)，元素的列寬被指定了。

在我們建立的 Cat Photo App 中，將會使用 col-xs-*，其中 xs 是 extra small 縮寫（應用於較小的螢幕，比如手機螢幕），* 是你需要填寫的數字，代表在一行中,各個元素應該佔的列寬。

把 Like, Info 和 Delete 三個按鈕一併放入一個 <div class="row"> 元素中；然後，其中的每一個按鈕都需要各自被一個 <div class="col-xs-4"> 元素包裹。

當div 元素設定了 class 屬性 row 之後，那幾個按鈕便可嵌入其中。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <div class="row">
  <div class=" col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
  <div class=" col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
  <div class=" col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
  </div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Ditch Custom CSS for Bootstrap

現在，讓我們清理一下之前的程式碼了，以讓我們的 Cat Photo 應用看起來更簡潔，用 Bootstrap 內建的樣式來替換我們之前自定義的樣式。

別擔心 —— 以後我們會有大把時間來自定義我們的 CSS 樣式的 ：）

刪除 style 元素裡的 .red-text, p 和 .smaller-imageCSS宣告，這樣你的 style 留下的宣告就只有 h2 和 thick-green-border。

然後刪除包含死連結的 p 元素。 移除 h2 元素的 red-text class 並且用 Bootstrap的 text-primary class替換之。

最後，移除第一個 img 元素的 "smaller -image" class ，替換為 Bootstrap的 img-responsive class。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <h2 class="text-center text-primary">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Use Spans for Inline Elements

你可以用 span 標籤來建立行內元素。還記得我們是怎樣使用 .btn-block來建立填滿整行的按鈕嗎？

這張圖展示了 inline 元素與 block-level 塊級元素的區別：

通過使用 span 元素，你可以把幾個元素放在一起。你甚至可以用此為一個元素的不同部分指定樣式。

把 "Things cats love" 中的 "love" 放到 span 標籤下。然後為其新增 text-danger class 來使文字變成紅色。

舉例，"Top 3 things cats hate" 元素的寫法如下：

<p>Top 3 things cats <span class = "text-danger">hate:</span></p>

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid">
  <h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p><span class="text-danger">Things cats love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Create a Custom Heading

讓我們來為Cat Photo 應用做一個導航吧，把標題和愜意的貓圖片放在同一行。

記住，Bootstrap使用響應式柵格系統，這使得把元素放入行內併為每個元素指定寬度變得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。

這張圖展示了 Bootstrap 的12欄柵格佈局是如何工作的：

注意，在此圖示中，我們使用了 col-md-* class 。此處 md 代表中等，* 指定了元素寬度應該佔用的欄數。 在這個案例中，我們指定了元素在中等大小的螢幕（如筆記本等）上所佔用的欄數。

在此應用中，我們將使用 col-xs-*， xs 意味著非常小（比如非常小的手機螢幕）， * 指定了元素寬度應該佔用的欄數。

將你的第一張圖片和 h2 元素放到同一個 <div class="row"> 元素下。 將你的 h2 元素放到 <div class="col-xs-8"> 下，你的圖片放到 <div class="col-xs-4"> 下，這樣他們就能位於同一行了。

注意現在圖片是否與文字大小一致呢？

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
  <div class="col-xs-8">
  <h2 class="text-primary text-center">CatPhotoApp</h2>
  </div>
  <div class="col-xs-4">
  <a href="#">![](/images/relaxing-cat.jpg)</a>
  </div>
  </div>
  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Add Font Awesome Icons to our Buttons

Font Awesome 是一個非常方便的圖示庫。這些圖示都是向量圖形，被儲存在 .svg 的檔案格式中。這些圖示就和字型一樣，你可以通過畫素單位指定它們的大小，它們將會繼承其父HTML元素的字型大小。

你可以將 Font Awesome 圖示庫增添至任何一個應用中，方法很簡單，只需要在你的 HTML 頭部增加下列程式碼即可：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

不過，我們已經事先在幕後為此頁面新增了該功能。（不必重複新增上面這段程式碼）

i 元素起初一般是讓其它元素有斜體(italic)的功能，不過現在一般用來指代圖示。你可以將 Font Awesome 中的 class 屬性新增到 i 元素中，把它變成一個圖示，比如：

<i class="fa fa-info-circle"></i>

你可以通過 Font Awesome 庫增加一個 thumbs-up 圖示到你的 like 按鈕中，方法是在i 元素中增加 class 屬性 fa 和 fa-thumbs-up。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#">![](/images/relaxing-cat.jpg)</a>
    </div>
  </div>
  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like<i class="fa fa-thumbs-up"></i></button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Add Font Awesome Icons to all of our Buttons

Font Awesome 是一個非常方便的圖示庫。這些圖片都是向量圖，以 .svg 檔案格式儲存。這些圖示用起來就像字型一樣。你可以使用畫素單位來指定他們的大小，它們會繼承父級HTML元素的字型大小。

使用 Font Awesome 分別為你的 info 按鈕新增 info-circle 圖示，為你的 delete 按鈕新增 trash 圖示。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#">![](/images/relaxing-cat.jpg)</a>
    </div>
  </div>
  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Responsively Style Radio Buttons

你還可以將 Bootstrap 的 col-xs-*用在 form 元素中。這樣的話，我們的單選按鈕就可以均勻地在頁面上展開，不需要知道螢幕的解析度有多寬。

將頁面中的兩個單選按鈕放置於一個 <div class="row">元素中。然後，新增 <div class="col-xs-6"> 元素並分別包裹每一個單選按鈕。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#">![](/images/relaxing-cat.jpg)</a>
    </div>
  </div>
  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <div class="row">
    <div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
    <div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
    </div>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Responsively Style Checkboxes

你還可以將 Bootstrap 的 col-xs-*用在 form 元素中。這樣我們的核取方塊就可以均勻地在頁面上展開了，不管螢幕的解析度是多大。

將你所有的核取方塊都放置於一個 <div class="row"> 元素中。然後分別把每個按鈕都放置於一個 <div class="col-xs-4"> 元素中。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#">![](/images/relaxing-cat.jpg)</a>
    </div>
  </div>
  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Loving</label></div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Lazy</label></div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Crazy</label></div>
    </div>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Style Text Inputs as Form Controls

你可以在你的 button 提交按鈕上新增 Font Awesome的 fa-paper-plane 圖示，方法是在元素中增加 <i class="fa fa-paper-plane"></i> 。

給你表單的文字輸入框增加 classform-control 。在你的表單提交按鈕中增加 class btn btn-primary 。同樣，在這個提交按鈕中增加 Font Awesome 的 fa-paper-plane 圖示。

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#">![](/images/relaxing-cat.jpg)</a>
    </div>
  </div>
  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>
    <input class=form-control type="text" placeholder="cat photo URL" required>
    <button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i>Submit</button>
  </form>
</div>

Line up Form Elements Responsively with Bootstrap

現在讓我們把 input 元素和提交按鈕 button 放到同一行。我們將用和之前一樣的方法：通過使用擁有 rowclass 屬性的 div 元素和其它在它之內的具有 col-xs-*class 屬性的 div 元素。

將你的表單中的 input 文字框和提交按鈕 button 放到一個具有 row class 屬性的 div 元素中。 將你的 input 放置於 class 為 col-xs-7 的 div元素中。 將你的表單的提交按鈕 button 放置於 class 屬性為 col-xs-5 的 div 元素中。

這是目前為止我們的 Cat Photo 應用的最後一個挑戰了。希望你能夠喜歡學習 Font Awesome，Bootstrap和響應式設計！

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#">![](/images/relaxing-cat.jpg)</a>
    </div>
  </div>
  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>
    <div class=row>
    <div class="col-xs-7"><input type="text" class="form-control" placeholder="cat photo URL" required></div>
    <div class="col-xs-5"><button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></div>
    </div>
    </form>
</div>

Create a Bootstrap Headline

現在，讓我們從頭開始練習我們的HTML, CSS 和 Bootstrap 技術。

我們將會搭建一個 jQuery playground，它也即將在我們接下來的 jQuery 課程中被投入使用。

首先，建立一個 h3 元素，並且包含文字內容 jQuery Playground 。

在 h3 元素中設定 Bootstrap 的 class 屬性 text-primary 為其上色，同時增加 Bootstrap 的 class 屬性 text-center 使文字居中顯示。

<h3 class="text-primary text-center">jQuery Playground</h3>

House our page within a Bootstrap Container Fluid Div

現在讓我們確保頁面裡所有的內容都是響應式的。

讓我們將 h3 元素放置於一個class屬性為 container-fluid的 div 元素中。

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>

Create a Bootstrap Row

現在將要為我們的內聯元素建立一個 Bootstrap 行。

在 h3 標籤下建立一個 div 元素，並且帶有 class 屬性 row。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row"></div>  
</div>

Split your Bootstrap Row

既然我們已經有了一個 Bootstrap 行，讓我們來把它分成兩欄來放置我們的元素吧。

在你的行內新增兩個 div 元素，每個都具有 col-xs-6 class 屬性。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
  <div class="col-xs-6"></div>
  <div class="col-xs-6"></div>
  </div>
</div>

Create Bootstrap Wells

Bootstrap 有一個 class 屬性叫做 well，它的作用是為設定的列創造出一種視覺上的深度感（一種視覺上的效果，動手寫程式碼體會一下）。

在你的每一個class為col-xs-6的div 元素中都嵌入一個帶有 well class 屬性的 div 元素。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
    <div class="well"></div>
    </div>
    <div class="col-xs-6">
    <div class="well"></div>
    </div>
  </div>
</div>

Add Elements within your Bootstrap Wells

現在我們已經在行內的每一列都巢狀了好幾層 div 元素了。這已經足夠了。現在讓我們新增 button 元素吧。

在每一個 well div 元素下放置三個 button 元素。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
      <button></button>
      <button></button>
      <button></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
      <button></button>
      <button></button>
      <button></button>
      </div>
    </div>
  </div>
</div>

Apply the Default Bootstrap Button Style

Bootstrap 還有一種屬於按鈕的 class 屬性叫做 btn-default 。

為你的每一個 button 元素增加兩個 class 屬性: btn 和 btn-default 。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
  </div>
</div>

Create a Class to Target with jQuery Selectors

並不是每一個 class 屬性都是用於 CSS 的。 有些時候我們建立一些 class 只是為了更方便地在jQuery中選中這些元素。

為你的每一個 button 都新增 target class。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
    </div>
  </div>
</div>

Add ID Attributes to Bootstrap Elements

回憶一下，我們除了可以給元素增加 class 屬性，還可以給你的每個元素增添一個 id 屬性。

每一個指定元素的 id 都是唯一的，並且在每個頁面中只能使用一次。

現在給我們每個包含 class well 的 div 元素一個唯一的 id。

記住，你可以像這樣賦予一個元素 id：

<div class="well" id="center-well">

給左邊的 well 賦予 id left-well。給右邊的 well 賦予 id right-well。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well" id="left-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well" id="right-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
  </div>
</div>

Label Bootstrap Wells

讓我們為我們的 wells 都標上它們的 id 吧。

在 left-well 之上，class為 col-xs-6 的 div 元素裡面，新增一個文字為 #left-well 的 h4元素。

在 right-well 之上，class為 col-xs-6 的 div 元素裡面，新增一個文字為 #right-well 的 h4元素。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
  </div>
</div>

Give Each Element a Unique ID

我們也可以使用jQuery並通過每個按鈕各自唯一的 id 來標識出它們。

給你的每一個按鈕一個唯一的 id ，以 target1 為開始，target6 為結束。

確保 target1 到 target3 在 #left-well 之中，target4 到 target6 則在 #right-well 之中。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1"></button>
        <button class="btn btn-default target" id="target2"></button>
        <button class="btn btn-default target" id="target3"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4"></button>
        <button class="btn btn-default target" id="target5"></button>
        <button class="btn btn-default target" id="target6"></button>
      </div>
    </div>
  </div>
</div>

Label Bootstrap Buttons

正如我們標註了每個 wells， 我們同樣想要標註每一個按鈕。

為你的每個 button 元素選擇與其 id 選擇器相同的文字。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Use Comments to Clarify Code

當我們開始使用jQuery，我們將修改HTML元素，但是實際上我們並不是直接在 HTML 文字中修改。

我們必須確保讓每個人都知道，他們不應該直接修改此頁面上這些程式碼。

記住，你可以在 為結束的地方進行評論註釋。(像這樣， )

請在你的 HTML 頂部加如下一段註釋：Only change code above this line. 。

<!--Only change code above this line.-->
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>