Bootstrap將會根據你的螢幕的大小來調整HTML元素的大小 —— 強調 響應式設計的概念。 通過響應式設計，你無需再為你的網站設計一個手機版的。它在任何尺寸的螢幕上看起來都會不錯。  你僅需要通過新增下列程式碼到你的HTML開頭來將Bootstrap新增到任意應用中：

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

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


<div class="container-fluid"></div>
<img class="img-responsive" src="/images/running-cat.jpg">
 

• 讓BUTTON橫向填充整個螢幕。通常情況下，你的 button 元素僅與它所包含的文字一樣寬。通過使其成為塊級元素，你的按鈕將會伸展並填滿頁面整個水平空間，任何在它之下的元素都會跟著浮動至該區塊的下一行。
• 深藍色btn-primary是你的應用的主要顏色，被用在那些使用者主要採取的操作上

<button class="btn btn-primary btn-block">Like</button>

<button class="btn btn-block btn-info">info</button>

<button class="btn btn-danger btn-block">Delete</button>
 

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 之後，那幾個按鈕便可嵌入其中

  <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>