一，利用bootstrap設(shè)計(jì)響應(yīng)式頁(yè)面
bootstrap能自動(dòng)獲取使用者的屏幕的寬度和高度，能自動(dòng)調(diào)整html元素的高度和寬度，因此也稱為響應(yīng)式布局。
使用方法：加以下鏈接添加到頭部：<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>，并將html內(nèi)容包含在一個(gè)class為container-fluid的div中。（備注:container-fluid 為寬度為100%，占據(jù)全部窗口的布局。）
例：<div class="container-fluid">小貓圖片</div>
二，通過(guò)bootstrap使圖片適配手機(jī)屏幕
只要給圖片添加class為img-responsive就行了
三， 通過(guò)bootstrap使文本居中
只要給文本添加class為text-center就行了
四，通過(guò)bootstrap添加按鈕
<button class="btn"></button>(備注：btn使按鈕沒(méi)有邊框）
五，塊級(jí)元素按鈕
塊級(jí)元素按鈕是寬度占據(jù)整個(gè)屏幕的按鈕
<button class="btn btn-block"></button>
六，給按鈕添加顏色
<button class="btn btn-block btn-primary"></button>深藍(lán)色
<button class="btn btn-block btn-info"></button>淡藍(lán)色
<button class="btn btn-block btn-danger"></button>紅色
七，頁(yè)面布局
boostrap使用響應(yīng)式網(wǎng)格系統(tǒng)，可以輕松將元素放入行中并設(shè)置寬度
<div class="row">
? ? ? ? <div class="col-xs-6"></div>
</div>
備注：1、md大概是筆記本屏幕大小，xs大概是手機(jī)屏幕大小
? ? ? ? ? 2、寬度有以下幾種分布：col-xs-6,col-xs-6;col-xs-4, col-xs-4, col-xs-4; col-xs-8, col-xs-4
八，創(chuàng)建行內(nèi)元素
可以通過(guò)span標(biāo)簽來(lái)創(chuàng)建一個(gè)整行的內(nèi)聯(lián)元素
<p>Things cats <span class="text-danger">love</span></p>
九，在按鈕上使用font awesome 圖標(biāo)
Font Awesome是一個(gè)方便的圖標(biāo)庫(kù)。 這些圖標(biāo)都是矢量圖形，以.svg文件格式存儲(chǔ)。 這些圖標(biāo)可以像字體一樣被處理,你可以使用像素設(shè)置字體大小一樣指定這些圖標(biāo)的大小，并且這些圖標(biāo)可以繼承父類(lèi)HTML標(biāo)簽的字體大小。 您可以添加Font Awesome到任何應(yīng)用程序，只需將下面的鏈接添加到你的HTML頂部就可以了：
<link rel="stylesheet"? href= "http:// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>
<button><i class="fa fa-thumbs-up"></i>like</button> like
<button><i class="fa fa-trash"></i>delete</button> delete
<button><i class="fa fa-info-circle"></i>info</button> info
<button><i class="fa fa-paper-plane"></i>submit</button> submit
十，使用Form Controls設(shè)置輸入框樣式
<input type="text" class="form-controls"? placeholder="cats picture url" required>
