Bootstrap將會根據你的屏幕的大小來調整HTML元素的大小 —— 強調 響應式設計的概念。
通過響應式設計，你無需再為你的網站設計一個手機版的。它在任何尺寸的屏幕上看起來都會不錯。
你僅需要通過添加下列代碼到你的HTML開頭來將Bootstrap添加到任意應用中：
<link rel="stylesheet" />
首先，我們需要把所有的HTML內容放在class為container-fluid的div下
1.給圖片添加img-responsive class屬性。這樣圖片的寬度就能完美地適配你的頁面的寬度了。
2.添加text-center class屬性，可以居中頭部元素
3.Bootstrap有它自己的 button 按鈕風格，在button 元素中，給它添加 btn class 屬性
4.添加Bootstrap的 btn-block class 到你的按鈕，使其成為塊級元素，你的按鈕將會伸展并填滿頁面整個水平空間，任何在它之下的元素都會跟著浮動至該區塊的下一行。
5.深藍色 .btn .btn-block .btn-primary
6.淺藍色 .btn .btn-block .btn-info
7.紅色 .btn .btn-block .btn-danger
8.下面這張圖表顯示了 Bootstraps 的12列網格布局是如何起作用的：
請注意，在這張圖表中，class屬性 col-md-* 正被使用。在這里，md 表示 medium (中等的)，* 代表一個數字，它指定了這個元素所占的列寬。通過此圖表的屬性設置可知，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了.
應用于較小的屏幕，比如手機屏幕，將會使用 col-xs-* ，其中 xs 是 extra small 縮寫.
9.可以用 span 標簽來創建行內元素，把 "Things cats love" 中的 "love" 放到 span 標簽下。然后為其添加 text-danger class 來使文字變成紅色。
<p>Top 3 things cats <span class = "text-danger">love:</span></p>
10.Font Awesome 是一個非常方便的圖標庫。這些圖標都是矢量圖形，被保存在 .svg 的文件格式中。這些圖標就和字體一樣，你可以通過像素單位指定它們的大小，它們將會繼承其父HTML元素的字體大小。
你可以將 Font Awesome 圖標庫增添至任何一個應用中，方法很簡單，只需要在你的 HTML 頭部增加下列代碼即可：
<link rel="stylesheet" />
到你的 like 按鈕中，方法是在i 元素中增加 class 屬性 fa 和 fa-thumbs-up。
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i></Likebutton>
delete 按鈕添加 trash 圖標，<i class="fa fa-trash"></i>
飛機圖標 <i class="fa fa-paper-plane"></i>
