FreeCodeCamp - Responsive Design with Bootstrap

FreeCodeCamp - Responsive Design with Bootstrap

Use Responsive Design with Bootstrap Fluid Containers

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

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

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

你僅需要通過添加下列代碼到你的HTML開頭來將Bootstrap添加到任意應用中：

<link rel="stylesheet" />

在此案例中，我們已經幫你把上述代碼添加到頁面中。

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

<link  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  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  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  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  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  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  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  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  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  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  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 意味著非常?。ū热绶浅Ｐ〉氖謾C屏幕）， * 指定了元素寬度應該占用的欄數。

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

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

<link  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" />

不過，我們已經事先在幕后為此頁面添加了該功能。（不必重復添加上面這段代碼）

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  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  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  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  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  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  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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Bootstrap是什么？ 一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,925評論 3贊 184
  • 第5章 菜單、按鈕及導航 一、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件，根...
    凜0_0閱讀 5,056評論 0贊 66
  • Use Responsive Design with Bootstrap Fluid Containers 流行的...
    歸云丶閱讀 630評論 0贊 1
  • 原文出處 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端進階之旅閱讀 7,123評論 0贊 42
  • 一個人的夜，是靜悄悄的度過，連鐘擺的聲音都來獨占世界；一個人的夜，是亮晶晶的眼睛，那昨晚的夢境也被打劫；一個人的夜...
    輝煌Ad098閱讀 478評論 0贊 6