Bootstrap將會根據(jù)你的屏幕的大小來調整HTML元素的大小 —— 強調 響應式設計的概念冶忱。
通過響應式設計，你無需再為你的網(wǎng)站設計一個手機版的。它在任何尺寸的屏幕上看起來都會不錯。
你僅需要通過添加下列代碼到你的HTML開頭來將Bootstrap添加到任意應用中：
<link rel="stylesheet" />
首先枢希，我們需要把所有的HTML內(nèi)容放在class為container-fluid的div下
1.給圖片添加img-responsive class屬性。這樣圖片的寬度就能完美地適配你的頁面的寬度了朱沃。
2.添加text-center class屬性苞轿，可以居中頭部元素
3.Bootstrap有它自己的 button 按鈕風格，在button 元素中逗物，給它添加 btn class 屬性
4.添加Bootstrap的 btn-block class 到你的按鈕搬卒，使其成為塊級元素，你的按鈕將會伸展并填滿頁面整個水平空間翎卓，任何在它之下的元素都會跟著浮動至該區(qū)塊的下一行契邀。
5.深藍色 .btn .btn-block .btn-primary
6.淺藍色 .btn .btn-block .btn-info
7.紅色 .btn .btn-block .btn-danger
8.下面這張圖表顯示了 Bootstraps 的12列網(wǎng)格布局是如何起作用的：
請注意，在這張圖表中失暴，class屬性 col-md-* 正被使用坯门。在這里，md 表示 medium (中等的)锐帜，* 代表一個數(shù)字，它指定了這個元素所占的列寬畜号。通過此圖表的屬性設置可知缴阎，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了.
應用于較小的屏幕简软，比如手機屏幕蛮拔，將會使用 col-xs-* ，其中 xs 是 extra small 縮寫.
9.可以用 span 標簽來創(chuàng)建行內(nèi)元素痹升，把 "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>
